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内 容 简介 


HTML 与 CSS 网 页 设计 是 动漫 设计 与 制作 视觉 效 果 设 计 、 多 媒体 技术 .计算 机 网 络 技术 等 专业 的 必 
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本 教材 采用 教学 .做 一 体 化 模式 ,以 核心 知识 能力 目标 、 任 务 驱动 和 实践 环节 为 单元 组 织 本 教材 的 
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础 知识 。 注 重 结合 实例 讲解 一 些 难点 和 关键 技术 ,在 实例 上 侧重 实用 性 和 启发 性 。 特 别 强调 知识 点 的 能 
力 目标 ,通过 合理 的 任务 驱动 和 实践 环节 提高 静态 网 页 制作 的 能 力 。 全 书 分 为 12 章 , 内 容 包括 :初始 
HTML HTML 文件 基本 标记 文字 布局 与 文字 效果 列表 .图像 与 多 媒体 、 超 链接 .表格 .表单 与 页 面 控件 、 
框架 与 浮动 窗口 JavaSeript ,CSS ,地 址 簿 网 站 的 布局 。 
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本 教材 采用 教学 做 一 体 化 的 方式 撰写 ,合理 地 组 织 学 习 单元 ,并 将 每 个 单元 分 
解 为 核心 知识 能 力 目标 、 任 务 了 驱动 .实践 环节 4 个 模块 ,体现 教学 做 一 体 化 过 程 。 

每 个 单元 的 核心 知识 点 强调 在 静态 网 页 制作 中 最 重要 和 实用 的 知识 ,能 力 目 
标 强调 使 用 核心 知识 点 进行 静态 网 页 制作 的 能 力 ,需要 完成 的 任务 中 的 “任务 模 
板 " 起 着 训练 静态 网 页 制作 能 力 的 作用 ,其 中 的 任务 总 结 主要 总 结 任 务 中 涉及 的 
重要 技巧 .注意 事项 以 及 扩展 知识 ,通过 该 “任务 模板 "的 训练 ,读者 有 能 力 完成 后 
续 的 实践 环节 。 第 1 章 主要 介绍 HTML 文件 的 基本 结构 以 及 如 何 运行 HTML 文 
件 。 第 2 章 是 HTML 文件 基本 标记 ,在 核心 知识 点 和 任务 的 安排 方面 特别 注重 训 
练 初学 者 应 当 掌握 和 理解 重要 的 基础 知识 以 及 知识 点 的 能 力 目 标 。 第 3 章 是 文字 
布局 与 文字 效果 ,在 任务 安排 上 注重 结合 实际 问题 训练 读者 熟练 地 设计 网 页 中 的 
文字 布局 与 文字 效果 。 第 4 章 是 列表 ,着 重 讲解 在 网 页 中 使 用 列表 设计 结构 化 的 、 
易 读 的 文本 。 第 5 章 是 图 像 与 多 媒体 ,在 任务 安排 上 注重 结合 实际 问题 训练 读者 
熟练 地 使 用 图 像 与 多 媒体 美化 网 页 。 第 6 章 是 超 链接 ,主要 讲述 了 在 网 页 中 如 何 
使 用 超 链接 。 第 7 章 是 表格 ,重点 介绍 了 表格 的 创建 .属性 以 及 结构 。 第 8 章 是 本 
书 的 重点 内 容 之 一 ,主要 讲述 在 网 页 中 使 用 表单 实现 程序 与 用 户 的 交互 。 第 9 章 
介绍 了 框架 与 浮动 窗口 的 用 法 。 第 10 章 是 JavaScript, 重 点 介绍 了 JavaScript 的 基 
本 语法 ,在 任务 安排 上 注重 结合 实际 问题 训练 读者 在 网 页 中 熟练 地 使 用 JavaScript 
完成 客户 端的 特定 功能 。 第 11 章 是 本 书 的 重点 内 容 之 一 ,主要 介绍 了 CSS 的 基 
本 语法 、 经 典 的 网 页 布局 。 第 12 章 是 一 个 综合 网 站 案例 ,通过 一 个 小 型 的 地 址 簿 
网 站 ,讲述 如 何 采 用 DIV + CSS 进行 网 站 的 前 台布 局 设计 。 

本 教材 特别 注重 引导 学 生 参 与 课堂 教学 活动 ,适合 高 等 院 校 相关 专业 作为 
教学 、 做 一 体 化 的 教材 。 

本 教材 的 示例 和 任务 模板 的 源 程序 以 及 电子 教案 可 以 在 清华 大 学 出 版 社 网 
站 免费 下 载 ,以 供 读者 和 教学 使 用 。 
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可 视 化 的 HTML 开发 工具 固然 方便 快捷 ,如 FrontPage、Dreamweaver 等 ,但 是 ,可 视 
化 开发 工具 自身 也 会 产生 大 量 不 必要 的 HTML 代码 ,这 样 会 为 以 后 的 程序 维护 埋 下 隐患 。 
一 个 优秀 的 网 页 设计 者 应 该 在 掌握 HTML 语言 的 基础 上 ,进一步 熟练 使 用 可 视 化 开发 工 
具 , 从 而 达到 快速 制作 网 页 和 优化 网 页 的 目的 。 

本 章 通过 简单 的 实例 掌握 HTML 文件 的 基本 结构 和 HTML 程序 的 开发 步骤 。 


1.1 HTML 文件 的 基本 结构 


1.1.1 核心 知识 


HTML 的 英文 全 称 是 Hyper Text Markup Language, 即 超 文本 标记 语言 , 它 是 用 于 编 
写 网 页 的 主要 标记 语言 。 下 面 是 一 个 HTML 文件 的 基本 结构 。 


<html> 
<head> 
< /head> 
<body> 
< /body> 
</htm> 
从 上 面 的 代码 段 可 以 看 出 ,HTML 文件 的 基本 结构 分 为 3 部 分 ,其 中 各 部 分 含义 见 下 
文 所 述 。 
去 html>.…</html>: 表示 HTML 文件 开始 和 结束 的 位 置 , 里 面包 括 过 head 之 和 
所 body> 等 标记 。HTML 文件 中 所 有 的 内 容 都 应 该 在 这 两 个 标记 之 间 。 
去 head>.…</head>: HTML 文件 的 头 部 标记 ,习惯 将 这 两 个 标记 之 间 的 内 容 统称 
为 HTML 的 头 部 。 
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去 body>.… 去 /body>: 用 来 指明 文档 的 主体 区 域 ,网 页 所 要 显示 的 内 容 都 要 放置 在 这 
个 标记 内 。 习 惯 将 这 两 个 标记 之 间 的 内 容 统称 为 HTML 的 主体 。 


1.12 能力 目标 

了 解 HTML 的 基本 概念 ,认识 并 理解 HTML 文件 的 基本 结构 。 
1.13 任务 驱动 

1. 任 务 的 主要 内 容 


把 “初次 见面 ,请 多 多 照顾 ”这 句 话 显示 在 网 页 的 主体 区 域 中 。 


2 任务 的 代码 模板 

将 下 列 examplel_1. html 中 的 [代码 替换 为 HTML 代码 ,有 关 代 码 要 求 :【 代 码 1] 为 
title 标记 的 结束 【代码 2] 为 body 标记 的 开始 【代码 3] 为 网 页 主体 的 内 容 “ 初 次 见面 ,请 多 
多 照顾 ”。 


examplel_1. html 


<html> 
<head> 
<title> 第 一 个 HTML 页 面 [代码 1 
< /head> 
【代码 2] 
【代码 引 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 
HTML 文件 中 的 标记 应 该 有 开始 标记 和 结束 标记 ,例如 ,以 二 title 二 开始 ,以 二 /title 二 
结束 。 每 个 文件 都 有 自己 的 扩展 名 ,HTML 文件 的 扩展 名 为 . html 或 . htm。 


4 代码 模板 的 参考 答案 


【代码 11: < /title> 
【代码 3]: <body> 
【代码 习 : 初次 见面 ,请 多 多 照顾 


1.14” 实践 环节 


。 把 examplel_1. html 完整 的 代码 保存 在 操作 系统 自 带 的 记事 本 (文本 文档 ) 中 。 选 
择 记事 本 菜单 中 的 “文件 ”>“ 另 存 为 ”命令 ,在 打开 的 对 话 框 中 选择 保存 的 路 径 , 在 
“文件 名 ”文本 框 中 输入 “examplel_1. html”, 单 击 “ 保 存 ” 按 钮 ,如 图 1. 1 所 示 。 

。 双击 “examplel_1. html” 文 件 , 观 察 运 行 效果 。 


mplel lhtnl 


保存 类 型 了) 文本 文档 (txt) 


图 1.1 HTML 程序 的 保存 


1.2 使 用 记事 本 编写 HTML 页 面 


1 己 1 核心 知识 

编写 HTML 页 面 有 两 种 常用 方法 : 一 种 是 利用 操作 系统 自 带 的 记事 本 编写 ; 男 一 种 是 
利用 可 视 化 网 页 制作 软件 (如 Dreamweaver) 编 写 。 使 用 可 视 化 网 页 制作 软件 编写 网 页 在 本 
书 中 不 涉及 。 下 面 讲述 使 用 记事 本 手工 编写 HTML 页 面 。 

HTML 语言 并 不 需要 什么 特殊 的 开发 环境 ,可 以 直接 在 操作 系统 自 带 的 记事 本 中 编 
写 。 使 用 记事 本 手工 编写 HTML 页 面 的 具体 操作 步骤 如 下 。 

(1) 在 Windows 操作 系统 下 ,选择 “开始 ”一 “程序 ”一 “附件 ”一 “记事 本 ”命令 ,新 建 一 
个 记事 本 ,在 记事 本 中 输入 HTML 代码 。 

(2) 编写 完 HTML 文件 后 ,选择 “文件 >“ 另存 为 "命令 ,在 “另存 为 "对 话 框 中 选择 保 
存 的 路 径 , 在 “文件 名 ”文本 框 中 输入 文件 的 名 字 , 如 myPage. html, 文 件 的 扩展 名 为 . html 
或 . htm。 

(3) 单 击 “ 保 存 ” 按 钮 ,这 时 该 文本 文件 就 保存 成 了 HTML 文件 ,双击 HTML 文件 就 可 
以 看 到 页 面 运行 的 效果 。 


122 能 力 目标 
使 用 记事 本 手工 编写 简单 的 HTML 页 面 。 
123 任务 驱动 


编写 一 个 简单 的 HTML 页 面 ,该 页 面 的 中 央 位 置 显示 两 行文 字 :“ 很 高 兴学 习 HTML 
语言 "和 “我 们 以 后 要 好 好 学 习 HTML 语言 >。 页 面 运 行 效果 如 图 1. 2 所 示 。 任 务 的 主要 
步骤 如 下 。 
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。 使 用 记事 本 编写 ,保存 HTML 页 面 。 
。 使 用 浏览 器 运行 HTML 页 面 。 


/人 我 的 HT 了 -页面 - Windows Internet Explorer 


[SA 本 Rs tr xp Pr- 


遍 收 总 严 | 以 我 的 mim 页 面 


很 高 兴 兴学 
我 全 革 站 昌 束 和 和 语言 


图 1.2 examplel_2. html 页 面 运 行 效果 


1. 使 用 记事 本 编辑 器 编写 、 保 存 HTML 文 件 
(1) 输入 文件 examplel_2. html 的 内 容 。 
在 打开 的 记事 本 编辑 器 中 输入 如 下 内 容 : 


<html> 
<head> 
<title> 我 的 HTML 页 面 < /title> 
</head> 
<body> 
<center> 
很 高 兴学 习 HTML 语 言 <br> 
我 们 以 后 要 好 好 学 习 HTML 语 言 
</center> 
< /body> 
</html> 
(2) 保存 examplel_2. html 文件 。 
参照 1. 1 节 实 践 环节 或 本 节 的 核心 知识 ,保存 examplel_2. html 文件 。 


2 使 用 浏览 器 运行 HIML 文件 ££ 

双击 “examplel _2. html” 文 件 的 图 标 , 即 可 打开 该 文 | 
件 并 可 看 到 网 页 的 运行 效果 。HTML 文件 的 图 标 如 图 1.3 HTML 文件 的 图 标 
图 1. 3 所 示 。 


3. 查看 HTML 页 面 的 源 代码 
对 于 学 习 HTML 网 页 而 言 ,可 以 查看 其 他 人 的 网 页 代码 是 一 件 很 美妙 的 事情 。 只 需 
要 简单 操作 就 可 以 查看 别人 的 网 页 是 如 何 构建 的 ,能 够 学 到 很 多 知识 。 但 是 如 何 查 
看 呢 ? 
要 想 查看 HTML 页 面 的 源 代 码 ,就 是 查看 它 的 源 文件 ,在 IE 浏览 器 中 查看 网 页 的 源 
代码 有 以 下 两 种 常用 方法 。 
。 把 光标 移 到 网 页 中 的 某 个 位 置 ( 别 放 在 图 像 上 ) ,然后 右 击 ,在 弹出 的 快捷 菜单 中 选 
择 “ 查 看 源 文件 ”命令 ,就 可 以 查看 源 文件 。 
。 在 浏览 器 菜单 栏 上 ,选择 菜单 中 的 “查看 ”一 “查看 源 文件 ”命令 ,也 可 以 查看 源 
交 件 5 


examplel_2. htnl 
360seURL 
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4 任务 小 结 或 知识 扩展 

在 编写 HTML 页 面 时 ,要 注意 以 下 几 点 。 

(1) “二” 和 “二 ”是 任何 标记 的 开始 和 结束 。 标 记 要 用 人 尖 插 号 括 起 来 ,并 且 在 结束 标记 
的 前 面 加 一 个 “/”, 如 过 body 二 一 /body> 。 

(2) 在 源 代码 中 任何 回 车 和 空格 都 不 影响 网 页 的 运行 效果 ,但 为 了 程序 清晰 易 读 ,建议 
不 同 的 标记 之 间 用 回 车 进行 换行 。 

(3) 在 源 代码 中 不 区 分 大 小 写 。 

(4) 要 正确 输入 标记 。 输 入 标记 时 ,不 要 输入 多 余 的 空格 ,否则 浏览 器 可 能 无 法 识别 这 
个 标记 ,导致 无 法 正确 显示 信息 。 
124 实践 环节 

编写 一 个 网 页 ,在 网 页 中 央 位 置 显示 * 关 关上 只 鸠 ,在 河 之 洲 。 窃 穹 淑女 ,君子 好 还 。" 网 页 

运行 效果 如 图 1.4 所 示 。 并 在 IE 中 查看 该 网 页 的 源 代 码 。 
全 关 趴 《诗经 》 
GO 起 ] E;\HTNL 与 CSS 网 页 设计 \ 第 1 章 初 识 HTHL\ 实 践 1.2. htm 
帘 收藏 天 。 征 关 瞪 (读经 ) 


Windows Internet Explorer 


ls x| [Ps 


关 关 有 瞧 鸠 ， 在 河 之 洲 。 
闸 守 小女 ， 君 子 好 还 。 


图 1.4 关 瞧 (诗经 ?的 运行 效果 


1.3 使 用 Eclipse 编写 HTML 页 面 


HTML 页 面 除了 利用 操作 系统 自 带 的 记事 本 和 可 视 化 网 页 制作 软件 编写 之 外 ,还 可 以 
使 用 IDE( 集 成 开发 环境 ) 工 具 编写 。 
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本 书 中 使 用 的 IDE 工具 是 Eclipse。Eclipse 是 一 个 可 用 于 开发 Java 程序 的 IDE 工具 。 
登录 http://www. eclipse. org, 在 Downloads 里 选择 Eclipse IDE for Java EE Developers， 
然后 在 Download Links 里 选择 适用 Windows 32-bit 的 Eclipse。 如 果 读 者 使 用 64 位 机 或 
其 他 的 操作 系统 ,可 以 在 下 载 列 表 中 选择 下 载 相 应 的 Eclipse。 

为 了 保证 Eclipse 的 正常 运行 ,应 事先 为 其 安装 JRE(Java 运行 环境 )。 可 以 登录 
http://www. oracle. com/technetwork/java, 在 Software Downloads 里 选择 Java SE 提供 
的 JRE。 对 于 Windows 操作 系统 ,选择 下 载 jre-7u5-windows-i586. exe, 如果 使 用 64 位 机 
或 其 他 的 操作 系统 ,可 以 在 下 载 列表 中 选择 下 载 相应 的 JRE。JRE 下 载 完 成 后 , 按 默 认 安 装 
即 可 完成 安装 。 

Eclipse 下 载 完成 后 ,解压 到 自己 设置 的 路 径 下 , 即 可 完成 安装 。Eclipse 安装 完成 后 就 
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可 以 启动 了 。 双 击 Eclipse 安装 目录 下 的 eclipse. exe 文件 ,启动 Eclipse。 在 初次 启动 时 , 需 
要 设置 工作 空间 ,比如 将 工作 空间 设置 为 E:\eclipse\workspace, 如 图 1.5 所 示 。 


CY Yorkspace Launcher 


Select a workspace 


Eclipse stores your projects in a folder called a workspace 
Choose a workspace folder to use for this session. 


Workspace: |E:\eclipse\workspace 司 [ Browse.. 


[lr PT TT | 


[ Ok ] Cancel 


图 1.5 设置 工作 空间 


在 图 1.5 所 示 的 界面 上 单 击 OK 按钮 进入 如 图 1.6 所 示 的 欢迎 页 面 。 


CF Java EE — Eclipse 


File Edit Havigate Search Project Run Window Help 


从 2 


1.6 Eclipse 欢迎 页 面 


132” 能力 目标 
使 用 Eclipse 编写 简单 的 HTML 页 面 。 
133 任务 驱动 


1. 任 务 的 主要 内 容 

(1) 创建 项 目 

@ 启动 Eclipse, 进 入 Eclipse 的 开发 界面 。 

@ 选择 主 菜 单 中 的 File>New 一 Project 命令 ,打开 New Project 对 话 框 ,在 该 对 话 框 
中 选择 Web 节点 下 的 Static Web Project 子 节点 ,如 图 1.7 所 示 。 

加 单 击 Next 按钮 ,打开 New Static Web Project 对 话 框 ,在 该 对 话 框 的 Project Name 
文本 框 中 输入 项 目 名 称 ,这 里 为 htmlFirst。 单 击 Finish 按钮 ,完成 项 目 htmlFirst 的 创建 。 
此 时 在 Eclipse 平台 左 侧 的 Project Explorer 选项 卡 中 ,将 显示 项 目 htmlFirst, 依 次 展开 各 
节点 ,可 显示 如 图 1.8 所 示 的 目录 结构 。 

(2) 创建 HTML 页 面 

htmlFirst 项 目 创建 完成 后 ,可 以 根据 实际 需要 创建 HTML 文件 。 下 面 将 创建 一 个 名 
字 为 myFirst. html 的 HTML 文件 。 

@ 选中 htmlFirst 项 目的 WebContent 节点 并 右 击 ,在 弹出 的 快捷 菜单 中 ,选择 New 一 
HTML File 命令 ,打开 New HTML File 对 话 框 ,在 该 对 话 框 的 File name 文本 框 中 输入 文 
件 名 myFirst. html, 其 他 采用 默认 设置 , 单 击 Finish 按钮 完成 HTML 文件 的 创建 。 


EF Wew Project 


Select a wizard 
Create a Web project for static content ONL files) only 


Wizards: 


cvs 
CS Eclipse Modeling Framework 
四 EJB 
由 -对 Jave 
四 舍 Java EE 
TE JavaSeript 
E> JAXB 
EE JPA 
® E> Plue-in Development 
日 eb 
EE Dynanic Web Project 
33 
GD Web Frament Project 
TC Pxanples 


@@ 


File Edit Navigate Search Project Run Window Help 
历 " DO QZ 9 
Project Explorer 3 i 


加 htnlFirst 
田 BN JavaScript Resources 


1.8 ”项目 htmlFirst 的 目录 结构 


@ HTML 文件 创建 完成 后 ,在 htmlFirst 项 目的 WebContent 节点 下 ,自动 添加 一 个 名 
称 为 myFirst. html 的 HTML 文件 ,同时 ,Eclipse 会 自动 将 HTML 文件 在 右 侧 的 编辑 框 中 
打开 。 

图 将 myFirst. html 文件 中 的 默认 代码 修改 为 以 下 代码 : 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> Insert title here< /title> 


< /head> 
<body> 
<center> 真 高 兴 , 忙 活 半天 了 ,终于 要 看 到 人 生 中 第 一 个 HTML 页面 了 。< /center> 
< /body> 
</html> 


@ 将 编辑 好 的 HTML 页 面 保存 (组 合 键 Ctrl 十 S) ,至 此 完成 了 一 个 简单 的 HTML 页 
面 的 创建 。 
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(3) 运行 HTML 页 面 

完成 HTML 页 面 的 创建 后 ,运行 该 页 面 。 下 面 介绍 具体 的 方法 。 

在 htmlFirst 项 目的 WebContent 节点 下 ,找到 myFirst. html 选中 该 HTML 文件 并 
右 击 ,在 弹出 的 快捷 菜单 中 ,选择 Run As 一 Run On Server 命令 ,打开 Run On Server 对 话 
框 ,在 该 对 话 框 中 ,选中 Basic 中 的 J2EE Preview, 其 他 采用 默认 设置 ,如 图 1.9 所 示 。 


TRun On Server 


Run On Server 
Select which server to use 目 
How do you want to select the server? 


OUanually define a new server 


Select the Server type: 
Lyne Filter toxt ] 


BB Basie 
目 ImTP Previen 
目 MrTP Server 


图 1.9 Run On Server 对 话 框 


@ 单 击 Finish 按钮 , 即 可 运行 该 HTML 页 面 , 运 行 后 的 效果 如 图 1. 10 所 示 。 如 果 想 
在 I 下 浏览 器 中 运行 该 页 面 ,可 以 将 图 1.10 中 的 URL 地 址 复制 到 IE 浏览 器 的 地 址 栏 中 ,并 
按 Enter 键 运行 即 可 。 
i 
国 必 [http://1localhost:80860/htnlFirst/myFirst. htnl HE 
真 高 兴 ， 忙 活 半 天 了 ， 终 于 要 看 到 人 生 中 第 一 个 HTML 页 面 了 。 
图 1.10 运行 HTML 页 面 


2 任务 小 结 或 知识 扩展 

在 一 个 Static Web Project( 静 态 项 目 ) 的 WebContent 节点 下 可 以 创建 多 个 HTML 文 
件 ,另外 HTML 文件 中 使 用 到 的 图 片 文件 .音乐 文件 .CSS 文件 ( 层 倒 样式 表 ) 以 及 
JavaScript 文件 都 放 在 WebContent 节点 下 。 有 关 CSS 和 JavaScript 在 HTML 页 面 中 的 应 
用 ,在 本 书后 续 的 内 容 中 将 介绍 。 

另外 ,请 注意 HTML 页 面 运行 时 并 不 需要 什么 特殊 环境 ,使 用 Eclipse 编写 并 运行 只 
是 为 了 方便 而 已 。 但 有 时 候 Eclipse 自 带 的 J2EE Preview 不 能 运行 个 别 HTML 页 面 (如 下 
载 页 面 ) ,这 时 就 需要 使 用 IE 浏览 器 运行 了 。 


134 实践 环节 
参照 本 节 的 任务 内 容 , 完 成 以 下 实践 内 容 。 


和 1 


。 在 htmlFirst 项 目 中 创建 一 个 名 称 为 yourFirst. html 文件 ,在 HTML 页 面 中 显示 
“不 错 ! 不 错 ! 自己 能 创建 HTML 页 面 ,并 且 可 以 运行 了 ”。 

。 使 用 Eclipse 运行 yourFirst. html 页 面 。 

。 使 用 下 浏览 器 运行 yourFirst. html 页 面 。 


1.4 小 结 


HTML 是 以 文字 为 基础 的 语言 ,并 不 需要 什么 特定 的 开发 环境 ,可 以 直接 在 Windows 
自 带 的 记事 本 中 编写 。HTML 程序 ,也 不 需要 什么 特定 的 运行 环境 ,可 以 使 用 Windows 自 
带 的 IE 运行 HTML 程序 。 

使 用 Eclipse 集成 开发 工具 编写 并 运行 HTML 程序 ,只 是 为 了 方便 而 已 ,并 不 是 说 
HTML 程序 需要 Eclipse 才能 编写 与 运行 。 


习 题 1 


1. 为 了 标识 一 个 HTML 文件 应 该 使 用 的 HTML 标记 是 ( Ns 
A. <p></p> B. =boby><=/body> 
C. <html></html> D. <table></table> 
2. 可 以 不 用 发 布 到 Web 服务 器 ,就 能 在 本 地 计算 机 上 浏览 的 网 页 编写 语言 是 ( 机 
A. ASP B. HTML G&G PHP D. JSP 
3. 用 HTML 标记 语言 编写 一 个 简单 的 网 页 ,网 页 最 基本 的 结构 是 ( ) 。 
A. <html> <head>...</head> <frame>...</frame> </html> 
B. <html> <title>...</title> <body>...=</body> =</html> 
C. <html> <title>...</title> <frame>...</frame> </html> 
D. <html> <head>...</head> <body>...</body> </html> 
4. 下 列 对 HTML 的 含义 解释 正确 的 是 ( )s 
A. HTML 即 Hyper Text Markup Language 超 文 本 标记 语言 
B. HTML 是 编程 语言 
C. HTML 是 一 种 开发 工具 
D. HTML 是 一 种 浏览 器 
5. 下 列 关 于 HTML 文件 的 说 法 错误 的 是 ( )。 
A. HTML 文件 是 一 个 包含 标记 的 文本 文件 
B. 这 些 标记 告诉 浏览 器 怎样 显示 这 个 页 面 
C. HTML 文件 必须 以 . htm 为 扩展 名 
D. HTML 文件 可 以 用 一 个 简单 的 文本 编辑 器 创建 
6. 简 述 HTML 文件 的 基本 结构 。 
7. 简 述 使 用 记事 本 编辑 器 编写 HTML 页 面 的 操作 步骤 。 
8. 简 述 编写 HTML 页 面 的 注意 事项 。 


HTML 文件 基本 标记 Se 


一 个 完整 的 网 页 应 该 包含 头 部 和 主体 两 部 分 。 头 部 ,主要 包括 当前 HTML 文件 的 相 
关 信 息 , 如 标题 ,编码 方式 和 关键 字 等 。 主 体 ,主要 包括 页 面 的 主体 内 容 , 如 文字 、 图 像 和 表 
格 等 。 本 章 将 介绍 这 些 基 本 标记 ,它们 都 是 一 个 完整 的 网 页 必 不 可 少 的 标记 。 


2.1 head 和 title 标记 


己 1.1 核心 知识 


在 HTML 文件 的 头 部 标记 中 ,一 般 需 要 包括 标题 和 元 信息 。 头 部 标记 包含 的 是 与 页 
面相 关 的 信息 ,而 不 是 页 面 本 身 所 展现 的 内 容 。 如 它 包含 的 title 标记 ,就 是 用 来 告诉 浏览 
器 在 页 面 标题 栏 上 显示 什么 内 容 。 

1. head 标记 

head 标记 的 格式 如 下 : 

<head> ..< /head> 

定义 在 HTML 文件 头 部 的 内 容 不 会 直接 显示 在 网 页 上 。 

2 title 标记 

title 标记 的 格式 如 下 : 


<title> ..< /title> 


<title 之 和 去 /title> 标 记 位 于 HTML 文件 的 头 部 ,即位 于 二 head 记 和 二/head 记 标记 
之 间 。<title 之 和 去 Vtitle 之 标记 中 间 的 内 容 就 是 标题 内 容 , 它 可 以 帮助 用 户 更 方便 地 识别 
页 面 。 
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己 1 能 力 目 标 
能 够 使 用 title 标记 设置 网 页 的 标题 。 
己 13 任务 驱动 


1. 任务 的 主要 内 容 
编写 一 个 HTML 页 面 ,该 页 面 的 标题 为 “学 习 head 和 title 标记 ”。 网 页 显示 的 内 容 
为 :设置 HTML 页 面 的 标题 时 应 尽 可 能 准确 地 描述 页 面 的 内 容 ,表达 清晰 。 


2 任务 的 代码 模板 
将 下 列 example2_1. html 中 的 【代码 了 替换 为 HTML 代码 。 
example2_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
【代码 1】 < !-- 设 置 title 标 记 --> 
【代码 2】< !-- 结 束 head 标 记 --> 
【代码 3】< !--body 标 记 开 始 --> 
<center> 
设置 ErML 页 面 的 标题 时 应 尽 可 能 准确 地 描述 页 面 的 内 容 ,表达 清 晰 。 
< /center> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

title 标记 的 内 容 还 有 如 下 一 些 其 他 用 途 。 

。 对 于 打开 的 文档 ,在 Windows 任务 栏 中 都 会 显示 出 来 。 在 打开 多 个 窗口 时 ,就 可 以 
使 用 标题 识别 不 同 的 文档 。 

。 当 搜 索引 擎 搜索 页 面 时 ,一 定 程度 上 依赖 于 标题 的 内 容 , 而 且 这 些 内 容 也 将 显示 在 
搜索 结果 中 。 

4 代码 模板 的 参考 答案 

【代码 11: <title> 学 习 head 和 title 标 记 < /title> 


【代码 2]: < /head> 
【代码 习 : <body> 
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。 将 任务 中 example2_1. html 的 代码 使 用 浏览 器 运行 一 下 ,看 看 网 页 标题 显示 的 位 置 
及 效果 。 

。 将 example2_1. html 网 页 中 的 标题 改 成 “今天 天 气 真 好 ,我 们 去 看 海 吧 !”, 再 看 看 网 
页 的 运行 效果 。 
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加) 


2.2 使 用 meta 标记 定义 编码 方式 、 定 时 跳 转 以 及 过 渡 效 果 


2e1 核心 知识 
在 head 标记 里 还 可 以 有 任意 数量 的 meta 标记 , 它 的 主要 功能 是 定义 页 面 的 信息 。 这 

些 信息 并 不 显示 在 浏览 器 中 ,例如 ,需要 向 浏览 器 或 搜索 引擎 提供 页 面 作者 的 名 字 、 关 键 字 

及 描述 信息 等 。 

1 定义 页 面 关键 字 

定义 页 面 关键 字 的 格式 如 下 ， 


<meta name= "keywords" content= "关键 字 内 容 " > 


其 中 ,name 为 属性 名 称 ,这 里 是 keywords 代表 设置 网 页 的 关键 字 , 在 content 属性 中 则 定 
义 具体 的 关键 字 内 容 。 关 键 字 可 以 提高 被 搜索 引擎 搜索 到 的 概率 ,多 个 关键 字 时 ,关键 字 之 
间 使 用 逗号 隔 开 。 

2 定义 网 页 语言 的 编码 方式 

meta 标记 可 以 用 来 告诉 浏览 器 使 用 什么 字符 集 显 示 网 页 。 这 样 浏览 器 就 可 以 正确 地 
选择 语言 ,而 不 需要 人 工 选择 。meta 标记 的 格式 如 下 : 

<meta http- equiv= "Content- Type" content= "text/html;charset= 字 符 集 类 型 "> 
其 中 ,http-equiv 表示 传送 HTTP 通信 协议 的 头 , 而 在 content 中 是 具体 的 属性 值 。 每 个 属 
性 都 是 由 name 和 value 两 部 分 组 成 的 ,其 格式 总 是 name= value。charset 用 于 设置 网 页 的 
字符 编码 类 型 ,简体 中 文 设置 为 gb2312 ,英文 设置 为 ISO-8859-1, 此 外 ,还 有 其 他 的 字符 集 ， 
如 utf-8( 网 页 不 管 使 用 什么 语言 都 适用 ) 。 

3. 定 义 网 页 的 定时 跳 转 

有 些 情况 下 ,一 个 网 页 需要 自动 跳 转 到 其 他 网 页 中 ,这 就 是 网 页 的 定时 跳 转 。 设 置 网 页 
定时 跳 转 的 格式 如 下 : 

<meta http- equiv= "refresh" content= " 跳 转 时 间 :URI= 跳 转 的 页 面 地 址 "> 
其 中 ,refresh 设置 网 页 的 刷新 ,content 中 给 出 了 刷新 的 时 间 和 刷新 后 的 页 面 地 址 ,时 间 和 
地 址 之 间 用 分 号 隔 开 。 默 认 情况 下 , 跳 转 时 间 以 秒 为 单位 。 

4 定义 网 页 的 过 渡 效 果 

当 进入 或 离开 页 面 时 ,页 面具 有 不 同 的 切换 效果 ,这 就 是 页 面 的 过 渡 效 果 。 添 加 此 功能 
可 以 使 网 页 看 起 来 更 具 动 感 ,但 有 的 IE 不 支持 过 渡 效 果 。 设 置 网 页 过 渡 效 果 的 格式 如 下 : 

<meta http- equiv= "过 渡 事 件 " content= "revealtrans (duration= 过 渡 效 果 持 续 时 间 ， 

transition= 过 渡 方式 )"> 
其 中 ,过 渡 事 件 可 以 是 进入 页 面 或 离开 页 面 。 进 入 页 面 事件 ,http-equiv 值 为 page-enter; 离 
开 页 面 事件 ,http-equiv 值 为 page-exist。 过 渡 效 果 持 续 时 间 默 认 以 秘 为 单位 ,过 渡 方 式 的 
编码 如 表 2. 1 所 示 。 
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表 2.1 过 渡 方 式 编码 表 rr 
编码 过 渡 方 式 编码 过 渡 方 式 
0 盒 状 收缩 12 随意 溶解 
1 盒 状 放射 13 由 左右 往 中 间 展 开 
2 图 形 收缩 14 由 中 间 往 左右 展开 
3 图 形 放射 15 由 上 下 往 中 间 展开 
4 由 下 往 上 16 由 中 间 往 左右 展开 
5 由 上 往 下 17 由 右 下 往 左下 展开 
6 由 左 往 右 18 由 右 下 往 左 上 展开 
7 由 右 往 左 19 由 左上 往 右 下 展开 
8 垂直 百叶 窗 20 由 左下 往 右 上 展开 
9 水 平 百 叶 窗 21 水 平 线 状 展开 
10 水 平 格 状 百叶 窗 22 垂直 线 状 展开 
11 垂直 格 状 百叶 窗 23 随机 产生 一 种 过 渡 方式 
Eee 能力 目 标 
能 使 用 meta 标记 设置 网 页 的 编码 方式 .定时 跳 转 以 及 过 渡 效 果 。 
己 23 任务 驱动 
1. 任 务 的 主要 内 容 


编写 两 个 网 页 : example2_2. html 和 example2_3. html。 将 这 两 个 网 页 放 在 同一 目录 
下 ,运行 效果 如 图 2. 1 和 图 2. 2 所 示 。 具 体 要 求 如 下 。 


中 国 只 jhttp://localhost:8080/ch2/exanple2_2. html 司 
我 是 example2_2 html 页 面 ， 打 开 我 $ 秒 钟 后 自动 跳 转 到 example2_3 html 页 面 。 
图 2.1 跳 转 前 


国 少 [http://1ocslhost:8080/ ch2/exanple2_3. htnl -| 区 


我 是 example2_3. html 页 面 ， 以 水 平 格 状 百 叶 窗 的 方式 动感 显示 我 。 


图 2.2 跳 转 到 example2_3. html 页 面 


。 example2_2. html 的 字符 编码 是 utf-8,example2_3. html 的 字符 编码 是 gb2312。 

。 打开 example2_2. html 页 面 5 秒 钟 后 自动 跳 转 到 example2_3. html 页 面 。 

。 从 example2_2. html 页 面 进入 example2_3. html 页 面 时 ,example2_3. html 页 面 以 
水 平 格 状 百叶 窗 的 方式 动感 显示 。 


2 任务 的 代码 模板 
将 下 列 example2_2. html 和 example2_3. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 


页 设计 教学 做 一 体 化 教程 


example2_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content="text/html 六 代码 1]"> 
< ! 一 代码 1 设置 编码 为 utf-8 --> 
<meta http-equiv= 噶 代码 2]" content= "5 六 代码 3]"> 
< ! 一 代码 2 与 代码 3 设置 定时 跳 转 --> 
<title>example2 2.html< /title> 
< /head> 
<body> 
<center> 


我 是 example2 2.html 页 面 ,打开 我 5 秒 钟 后 自动 跳 转 到 example2 3.html 页 面 。 


</center> 
< /body> 
</html> 


example2_3. html 


< !DOCTYPE html PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html14/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html 攻 代码 4]"> 
< 上 -代码 4 设置 编码 为 gb2312 --> 


<meta http-equiv= 叶 代码 5]" content= "revealtrans (duration=5 必 代码 可 )">< !-- 代 码 


5 设置 过 渡 事 件 为 进入 页 面 ,代码 6 设置 过 渡 方 式 为 10--> 
<title>example2 3.html< /title> 

< /head> 

<body> 
<center> 

我 是 example2 3.html 页 面 ,以 水 平 格 状 百叶 窗 的 方式 动感 显示 我 。 

</center> 

< /body> 

</html> 


3. 任务 小 结 或 知识 扩展 


使 用 meta 标记 实现 从 一 个 网 页 自动 跳 转 到 另 一 个 网 页 时 ,要 注意 跳 转 网 页 文件 的 路 
径 。 如 果 只 指定 跳 转 网 页 的 文件 名 ,那么 这 两 个 网 页 文件 必须 在 同一 个 目录 中 。 

meta 标记 很 难 记忆 ,不 要 担心 ,因为 绝 大 多 数 人 都 记 不 住 。 即 使 是 最 老练 和 专业 的 编 
码 人 员 也 很 难 正确 地 记 住 这 些 标 记 , 所 以 做 得 最 多 的 一 件 事 是 ,从 正确 的 地 方 (最 可 能 是 一 
个 项 目 中 ) 直 接 将 源 代码 复制 过 来 。 那 些 功能 齐备 的 Web 开发 工具 ,如 Dreamweaver 通常 


会 对 这 些 难以 记忆 的 标记 自动 生成 代码 。 


在 head 标记 中 还 会 出 现 诸如 CSS 标记 、JavaScript 代码 之 类 的 内 容 , 不 过 这 些 东西 将 


在 需要 时 再 做 介绍 。 


4 代码 模板 的 参考 答案 


【代码 1 : 
【代码 3] : 
【代码 习 : 
【代码 9]: 
【代码 可 : 
【代码 可 : 


charset=utf- 8 
refresh 
url=example2 3.html 
charset= gb2312 
page- enter 


transition=10 


224 实践 环节 


。 首先 将 任务 中 的 【代码 1] 换 成 "charset 二 ISO-8859-1" ,然后 运行 example2_2. html 


网 页 


,看 看 页 面 显示 内 容 是 否 有 乱码 。 


。 在 example2_2. html 网 页 的 head 标记 中 加 上 到 meta http-equiv 王 "page-enter" 


content 一 ”revealtrans(duration 一 5，transition 一 0) "二 ,再 运行 example2_2. html 
网 页 ,看 看 运行 效果 。 


2.3 使 用 body 标记 设置 背景 色 和 文字 颜色 


己 31 核心 知识 


HTML 页 面 的 body 标记 中 几乎 包含 了 在 浏览 器 中 所 看 到 的 一 切 , 如 网 页 的 背景 文字 
和 图 片 等 。 这 些 内 容 都 是 通过 body 标记 的 属性 进行 设置 的 。 

1. 设 置 网 页 的 背景 色 

通常 情况 下 ,浏览 器 的 背景 色 为 白色 ,但 使 用 bgcolor 属性 可 以 设置 整个 网 页 的 背景 
色 ,设置 背景 色 的 格式 如 下 : 

<body bgcolor=" 网 页 的 背景 色 "> 


其 中 ,bgcolor 是 一 个 属性 , 它 的 值 可 以 是 一 个 颜色 英文 名 称 ,如 red, 也 可 以 是 一 个 十 六 进 制 
的 颜色 值 , 如 # FF0099。 部 分 颜色 编码 值 如 表 2. 2 所 示 。 


表 2.2 部 分 颜色 编码 表 


颜色 十 六 进 制 编码 英文 名 称 颜色 十 六 进 制 编码 英文 名 称 
红 #FF0000 red 蓝 #0000FF blue 
橙 #FFA500 orange 靛 #4B0082 indigo 
黄 #FFFFO00 yellow 紫 # 800080 purple 
绿 #008000 green 

2 设置 网 页 的 文字 颜色 


body 标记 中 的 text 属性 可 以 设置 网 页 文字 的 颜色 ,在 没有 对 文字 的 颜色 单独 定义 时 ， 
这 一 属性 将 对 页 面 中 所 有 的 文字 起 作用 ,设置 网 页 文字 颜色 的 格式 如 下 : 


<body text= "文字 的 颜色 "> 


苹 数学 做 一 体 化 教程 
> 
其 中 ,text 的 属性 值 与 定义 网 页 背景 色相 同 。 
己 32 能力 目标 
能 使 用 body 标记 的 bgcolor 属性 设置 网 页 的 背景 色 , 能 使 用 body 标记 的 text 属性 设 
置 网 页 的 文字 颜色 。 
233 任务 驱动 


1. 任务 的 主要 内 容 
编写 一 个 网 页 ,该 网 页 的 背景 色 为 蓝 色 ,文字 颜色 为 白色 。 运 行 效果 如 图 2. 3 所 示 。 


$ [http://localhost:8080/ch2/exanple2_4. html HB 


我 们 去 看 海 吧 ! 
太 热 了 


pp! 


图 2.3 example2_4. html 页 面 的 运行 效果 


2 任务 代码 模板 
将 下 列 example2_4. html 中 的 [代码 替换 为 HTML 代码 。 
example2_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.0rg/TR/html4/lo0se.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=utf- 8"> 
<title>example2 4.html< /title> 
</head> 
<bogdy【 代 码 23【 代 码 2]> 
<!-- 代 码 1 设置 网 页 背景 色 为 蓝 色 , 代 码 2 设置 文字 颜色 为 白色 --> 
我 们 去 看 海 吧 !<br> 太 热 了 吧 !<br> 热 吗 ? <br> 热 。 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

在 设置 网 页 的 背景 色 时 ,要 尽量 考虑 到 浏览 者 的 感受 。 一 般 情况 下 ,网 页 背景 色 都 是 浅 
颜色 的 ,这 样 会 减轻 浏览 者 的 视觉 疲劳 。 另 外 ,在 设置 网 页 中 文字 的 颜色 时 ,要 注意 文字 颜 
色 和 网 页 背景 色 不 要 相同 或 相近 。 

4 代码 模板 的 参考 答案 


【代码 11: bgcolor= "blue" 
【代码 2]: text="white" 


234 实践 环节 


编写 一 个 网 页 ,背景 颜色 为 绿色 ,网 页 中 的 文字 颜色 为 白色 ,网 页 中 的 文字 内 容 由 读者 
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自行 选择 。 
2.4 使 用 body 标记 设置 背景 图 片 和 边 距 


到 1 核心 短 训 
1. 设 置 网 页 的 背景 图 片 
除了 使 用 bgcolor 为 网 页 定义 背景 色 之 外 ,还 可 以 使 用 background 属性 为 网 页 设置 背 
景 图 片 ,格式 如 下 : 
<body background= "背景 图 片 的 地 址 "> 
其 中 ,background 的 值 是 一 个 图 片 的 地 址 。 一 般 情况 下 ,作为 网 页 背景 的 图 片 会 小 于 浏览 
器 窗口 的 显示 尺寸 ,此 时 浏览 器 就 会 横向 或 纵向 重复 显示 该 图 片 ,直到 铺 满 浏览 器 的 窗口 为 
止 。 如 果 在 网 页 中 既 使 用 bgcolor 设置 了 背景 色 , 又 使 用 background 设置 了 背景 图 片 , 那 
么 浏览 器 会 用 背景 图 片 覆 盖 背 景色 。 
2 设置 网 页 的 边 距 
有 时 我 们 看 到 的 网 页 内 容 并 不 是 把 整个 浏览 器 占 满 ,这 是 怎么 制作 的 呢 ? 在 制作 网 页 
时 ,可 以 设置 网 页 内 容 与 浏览 器 左 侧 上 部 边框 之 间 的 距离 。 格 式 如 下 : 
< body topmargin=" 上 边 距 的 值 " leftmargin=" 左 边 距 的 值 " rightmargin=" 右 边 距 的 值 " 
bottommargin= "下边 距 的 值 "> 
其 中 , 边 距 的 值 就 是 普通 的 数字 ,默认 以 像素 为 单位 。 
242 能力 目 标 


能 使 用 body 标记 的 background 属性 设置 网 页 的 背景 图 片 ,能 使 用 body 标记 的 
topmargin 属性 和 leftmargin 属性 设置 网 页 的 边 距 。 
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1. 任 务 的 主要 内 容 

编写 一 个 网 页 ,选择 一 张 图 片 作 为 该 网 页 的 背景 图 片 ,背景 图 片 与 HTML 网 页 文件 在 
同一 个 目录 下 。 设 置 该 网 页 内 容 的 上 边 距 为 50, 左 边 距 为 50。 网 页 设置 边 距 前 运行 效果 如 
图 2.4 所 示 , 网 页 设置 边 距 后 运行 效果 如 图 2. 5 所 示 。 


画 本 |http://localhost:8080/chz/exsaple2_5 htal 司 g 


图 2.4 example2_5. html 页 面 边 距 设置 前 的 运行 效果 


(全 SCSS 殉 页 设计 教学 做 一 体 化 教程 


四 ) 


男 涵 http://lecalhost:8080/chz1exsaple2_5 htal 中 


图 2.5 example2_5. html 页 面 边 距 设置 后 的 运行 效果 


2 任务 代码 模板 
将 下 列 example2_5. html 中 的 【代码 3 替换 为 HTML 代码 。 
example2_5. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=utf- 8"> 
<title> example2_5.html< /title> 
</head> 
<body〖【 代 码 1]- "beijingtupian.jpg"【 代 码 2]- "50" leftmargin= "50"> 
<!-- 代 码 1 设置 网 页 背景 图 片 ,代码 2 设置 网 页 上 边 距 为 50--> 
想 你 的 日 子 <br><br> 想 你 的 日 子 <br> 我 总 是 <br> 口 含 青 橄榄 <br> 慢 慢 地 咀嚼 <br> 
美美 地 回味 <br> 尽 管 有 些 苦涩 <br> 可 也 不 乏 甘 香 呵 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

从 图 2.4 与 图 2. 5 看 出 ,网 页 边 踢 设置 后 网 页 背景 的 边 距 并 没有 改变 。 如 果 想 让 网 页 
背景 的 边 距 也 跟着 变化 的 话 , 可 以 通过 CSS 来 设置 网 页 的 页 边 距 ,CSS 知识 将 在 后 面 章节 
讲解 。 

使 用 body 标记 的 background 属性 设置 网 页 背景 图 片 时 ,要 注意 它 的 值 是 一 个 图 片 的 
地 址 。 如 果 只 指定 图 片 文件 的 名 字 ,那么 要 保证 图 片 文件 和 网 页 文件 在 同一 个 目录 中 。 


4 代码 模板 的 参考 答案 


【代码 11: background 
【代码 2】]: topmargin 


244 ”实践 环节 


编写 一 个 网 页 ,网 页 背景 图 片 及 文字 内 容 由 读者 自行 选择 。 网 页 的 上 边 距 的 值 设置 为 
100 ,左边 距 的 值 设置 为 50, 右 边 距 的 值 设置 为 100。 


2.5 小 结 


在 网 页 中 ,除了 head ,title .meta 以 及 body 这 些 基本 标记 外 ,还 包括 一 种 不 显示 在 网 页 
中 的 标记 , 那 就 是 代码 的 注释 。 适 当 的 注释 可 以 更 好 地 理解 网 页 中 的 代码 ,也 可 以 方便 以 后 
的 维护 ,是 一 种 良好 的 编程 习惯 。 注 释 标 记 由 “二 !” 开 始 ,以 “二 ”结束 ,开始 部 分 是 由 一 
个 左 尖 括号 ,一 个 半角 感叹 号 和 两 个 连 字 符 组 成 ,结束 部 分 由 两 个 连 字 符 和 一 个 右 尖 括号 
组 成 。 

使 用 meta 标记 可 以 定义 页 面 语言 的 编码 方式 ,一般 情 况 下 ,页 面 语言 的 编码 方式 都 定 
义 通用 的 编码 UTF-8。 

在 body 标记 中 可 以 设置 整个 网 页 的 背景 色 .背景 图 片 以 及 文字 颜色 ,但 程序 开发 者 要 
注意 网 页 的 整体 美观 ,不 要 给 浏览 者 造成 视觉 疲劳 。 


习 题 2 


i 


.以 下 标记 中 ,用 于 设置 页 面 标题 的 是 ( )。 
A. =title> B. =caption> C. <head> D. =html> 
2. 若是 设计 网 页 的 背景 图 形 为 bg. png, 以 下 标记 中 ,正确 的 是 ( Xs 
A. =body background= "bg. png"> 
B. =body bground= "bg. png"> 
C. 所 body image= "bg. png"> 
D. =body bgcolor= "bg. png"> 
3. 关于 HTML 文件 的 说 法 正确 的 是 ( Ys 
A. HTML 标记 都 必须 配对 使 用 
B. 在 一 title 之 和 去 /title> 标 签 之 间 的 是 头 信息 
C. HTML 标签 是 区 分 大 小 写 的 ,二 B> 跟 <<b> 表 示 的 意思 是 不 一 样 的 
D. 二! 一 二 标记 是 注释 标记 
4. 编写 一 个 网 页 ,具体 要 求 如 下 : 
。 标题 为 “我 自己 的 空间 ”; 
。 文 字 编 码 为 gb2312; 
。 以 垂直 格 状 百叶 窗 的 方式 动感 显示 ; 
。 背景 色 为 能 色 ,网 页 中 的 文字 颜色 为 红色 ; 
。 上 边 距 的 值 设置 为 200, 左 边 距 的 值 设 置 为 100 ,右边 距 的 值 设 置 为 100; 
。 文字 内 容 由 读者 自行 选择 。 
5. 编写 两 个 网 页 : index. html 和 autopage. html, 具 体 要 求 如 下 。 
。 index. html 网 页 运行 10 秒 钟 后 ,自动 打开 autopage. html 网 页 ; 
。 由 读者 自行 选择 一 张 图 片 作为 index. html 网 页 的 背景 图 片 ; 
。 两 个 网 页 中 的 文字 内 容 由 读者 自行 选择 。 


文字 布局 与 文字 效果 


在 一 个 网 页 中 ,文字 是 灵魂 , 它 可 以 起 到 传递 信息 .导航 以 及 交互 的 作用 。 在 网 页 中 显 
示 大 量 的 文字 并 不 困难 ,但 是 如 何 对 这 些 文字 进行 编排 以 及 控制 这 些 文字 的 显示 方式 ,让 网 
页 浏览 者 舒适 地 浏览 网 页 ,是 一 个 比较 头疼 的 问题 。 本 章 根据 这 个 问题 ,主要 讲述 文字 格 
式 、 段 落 格式 文字 滚动 以 及 水 平 线 的 设计 。 


3.1 标题 标记 


311 核心 知识 
HTML 将 和 文本 相关 的 标题 分 成 6 个 级 别 ,1 至 6 级 的 标题 语法 格式 如 下 : 


<hl> ..< /hl> 
<h2> ..< /h2> 
<h3> ..< /h3> 
<h4> ..< /h4> 
<h5> ..< /h5> 
<h6> ..< /h6> 


hl 到 h6 ,作为 标题 标记 ,依据 重要 性 递减 。 遵 循 这 样 的 原则 是 很 有 必要 的 , 它 能 让 页 面 的 
层级 关系 更 清楚 ,让 搜索 引擎 更 好 地 抓 取 和 分 析出 页 面 的 主题 内 容 等。 浏览 器 的 默认 样式 也 
是 依据 标题 的 重要 性 递减 ,字号 从 hl 到 h6 由 大 变 小 。 为 了 更 好 地 理解 ,请 看 下 面 的 代码 段 : 

<hl> 学 习 标 题 标记 < /hl> 

<h2> 第 3 章 文本 内 容 < /h2> 


<h3>3.1 文 字 < /h3> 
<h4>3.1.1 字 号 </h4> 


第 3 章 “文字 布局 六 昌 世 殉 》 


hl 一 级 标题 代表 重 中 之 重 , 一 般 运 用 于 网 站 标题 或 者 头条 新 闻 。 虽 然 hl 代码 可 以 写 
多 个 ,但 实际 上 有 唯一 性 ,hl 标题 在 一 个 页 面 里 面 最 好 只 出 现 1 次 或 者 没有 。h2 二 级 标题 
主要 出 现在 页 面 主体 内 容 的 文章 标题 和 栏目 标题 上 。ha3 三 级 标题 一 般 出 现在 页 面 的 边 侧 
栏 上 。 页 面 层 级 标题 不 能 太 多 ,所 以 h4、h5 和 h6 一 般 出 现 得 较 少 。 


引 1 能 力 目标 
能 使 用 标题 标记 设置 HTML 页 面 各 种 级 别 的 标题 。 
313 任务 驱动 


1 任务 的 主要 内 容 
编写 一 个 网 页 ,网 页 中 包含 1.3、5 三 个 级 别 标 题 。 网 页 运行 效果 如 图 3. 1 所 示 。 


国 只 [http://1localhost:8080/ch3/exanple3_1. htnl 司 ge 


第 三 世界 
中 国 


图 3.1 example3_1. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_1. html 中 的 [代码 替换 为 HTML 代码 。 
example3_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 1.html< /title> 
< /head> 
<body> 
【代码 1]< ! 一 设置 hi 标题 为 “第 三 世界 ”--> 
【代码 2]< ! 一 设置 hb3 标题 为 “中 国 ”一 > 
【代码 习 < !-- 设 置 h5 标 题 为 “辽宁 ”--> 
</body> 
</html> 


3. 任务 小 结 或 知识 扩展 

不 同 的 浏览 器 ,标题 的 字体 大 小 是 不 相同 的 。 这 种 差别 ,通常 在 布局 中 用 CSS 将 其 
统一 。 

4 代码 模板 的 参考 答案 

【代码 了 1: <hl> 第 三 世界 < /hl> 


‘ai 


(人 CSS 现 页 设计 教学 做 一 体 化 教 各 
59) 

【代码 33: <h3> 中 国 </h3> 

【代码 习 : <h5> 辽 宁 < /h5> 


314 实践 环节 
编写 一 个 网 页 ,网 页 中 包含 2.3、4 三 级 标题 ,网 页 运行 效果 如 图 3. 2 所 示 。 
男 从 |http://1ocalhost:8080/ch3/3. 1 实践 环 节 . htnl Ea 
中 国 
辽宁 
大 连 


图 3.2 ”3.1 实践 环节 . html 运行 效果 


3.2 使 用 font 标记 设计 文字 的 大 小 、 字 体 以 及 颜色 


3 纪 1 核心 知识 
1. 设 置 文字 大 小 
文字 的 大 小 在 网 页 中 非常 重要 , 它 是 引起 浏览 者 注意 的 一 个 因素 ,使 用 二 font 二 标记 中 

的 size 属性 可 以 设置 文字 的 大 小 ,语法 格式 如 下 : 
<font size= "文字 大 小 "> 被 设置 的 文字 < /font> 

其 中 ,size 属性 的 值 有 相对 与 绝对 两 种 定义 ,从 1 到 7 的 整数 ,代表 字体 大 小 的 绝对 字号 ;而 

从 一 4 到 十 4 的 整数 (不 包含 0) 的 字体 是 相对 于 3 号 的 放大 与 缩小 字号 ,其 中 “十 "号 不 能 

省 略 。 

2 设置 文字 字体 

font 标记 中 的 属性 face 用 于 设置 网 页 中 文字 的 字体 名 称 ,浏览 器 中 只 有 安装 了 设置 的 
字体 ,才能 正确 显示 设置 的 字体 。 设 置 字体 语法 格式 如 下 : 

<font face= "字体 的 名 称 必 被 设置 的 文字 < /font> 

其 中 ,face 属性 值 可 以 有 1 个 或 多 个 。 默 认 情 况 下 ,使 用 第 一 种 字体 显示 ,如 果 浏 览 器 没 

有 第 一 种 字体 , 则 使 用 第 2 种 :以 此 类 推 。 如 果 设置 的 字体 都 不 存在 , 则 会 以 默认 的 字体 

显示 。 

3. 设 置 文字 颜色 
font 标记 中 的 属性 color 用 于 设置 网 页 中 文字 的 颜色 ,语法 格式 如 下 : 


<font color=" 字 体 的 颜色 "> 被 设置 的 文字 < /font> 


其 中 ,字体 的 颜色 值 与 网 页 背景 色 值 一 样 ,可 以 是 一 个 英文 单词 ,也 可 以 是 一 个 十 六 进 制 的 
颜色 值 。 


第 3 章 文字 布局 本 交 昌 区 呈 》 


《Ea 


322 能 力 目标 
能 使 用 font 标记 的 属性 size 设置 文字 的 大 小 ,能 使 用 font 标记 的 属性 face 设置 文字 的 

字体 类 型 ,能 使 用 font 标记 的 属性 color 设置 文字 的 颜色 。 

323 任务 驱动 


1. 任 务 的 主要 内 容 
编写 一 个 网 页 ,网 页 中 的 文字 大 小 为 “6” 号 ,字体 类 型 为 “华文 行 楷 ”, 颜 色 为 “blue”。 网 
页 运行 效果 如 图 3. 3 所 示 。 


-3 国 $lhttp://localhost: B080/ch3/exanple3_2. htnl 问世 


面 朝 大 海 ， 春 暖 花 开 。 


图 3.3 example3_2. html 运行 效果 


2 任务 的 代码 模板 

将 下 列 example3_2. html 中 的 [代码 ] 蔡 换 为 HTML 代码 ,有 关 代码 要 求 : 【代码 1] 设 
党 文字 大 小 为 6 号 ,【 代 码 2 设置 文字 字体 类 型 为 "华文 行 楷 ",【 代 码 3] 设 置 文字 颜色 为 
蓝 色 。 

example3_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 2.html< /title> 
< /head> 
<body> 
<center> 
<font【 代 码 1]="6" 【代码 2]= "华文 行 楷 "【 代 码 3]= "blue"> 
面 朝 大 海 ,春暖 花 开 。 
</font> 
</center> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

如 果 网 页 中 的 文字 大 小 、 字 体 颜 色 都 一 样 ,那么 整个 版 面 看 起 来 就 会 显得 很 单调 。 在 网 
页 中 文字 大 小 、 字 体 以 及 颜色 设置 是 相当 重要 的 ,只 有 大 小 、 字 体 以 及 颜色 丰富 而 协调 才能 
吸引 浏览 者 的 注意 ,并 得 到 认可 。 但 要 注意 ,网 页 的 文字 格式 不 要 过 于 丰富 ,不 要 给 浏览 者 
带 来 视觉 疲劳 。 

4 代码 模板 的 参考 答案 

【代码 11: size 


1， 人 SCSS 同 页 设计 教学 做 一 体 化 教程 

六 
| 【代码 2]: face 
【代码 3]: color 


324 实践 环节 
写 一 个 网 页 ,网 页 中 的 文字 大 小 为 “十 1” 号 ,字体 类 型 为 “黑体 ”, 颜 色 为 “green”。 

页 运行 效果 如 图 3.4 所 示 。 

D SS 国 $ http://1oealhost;8080/ch3/3.2 实 践 环节 . html 


外 面 的 世界 很 精彩 ， 文 字 设 置 也 很 精彩 。 
图 3.4 ”3.2 实践 环节 网 页 运行 效果 


图 


3.3 ” 粗 体 与 斜体 


331 核心 知识 
1 设置 文字 粗 体 


网 


二 b 二 和 二 strong 记 是 网 页 中 设置 粗 体 文字 的 基本 元 素 。 在 二 b 二 > 和 二 /b 志 或 在 


二 strong 这 和 三 /strong 二 之 间 的 文字 ,在 浏览 器 中 都 会 以 粗 体 字体 显示 ,语法 格式 如 下 : 


<b> 被 加 粗 的 文字 < /b> 
< strong> 被 加 粗 的 文字 < /strong> 


这 两 个 元 素 的 首尾 标记 都 是 必需 的 ,如 果 没 有 结尾 ,浏览 器 会 认为 从 标记 开始 的 所 有 文字 都 


是 粗 体 。 
2 设置 文字 斜体 


去 一 、 二 em 之 和 所 cite 之 是 网 页 中 设置 斜体 文字 的 基本 元 素 。 在 二 i> 和 <</i 一 、 
< 二 em 之 和 所 /em> 或 二 cite 之 和 过/cite> 之 间 的 文字 ,在 浏览 器 中 都 会 以 斜体 字体 显示 , 语 


法 格式 如 下 : 


<i> 斜 体 的 文字 < /i> 
<em> 斜 体 的 文字 < /em> 
<cite> 斜 体 的 文字 < /cite> 


这 三 个 元 素 的 首尾 标记 都 是 必需 的 ,如 果 没 有 结尾 ,浏览 器 会 认为 从 标记 开始 的 所 有 文字 都 


是 斜体 。 

332 能 力 目标 
能 使 用 粗 体 标记 设置 粗 体 的 文字 ,能 使 用 斜体 标记 设置 斜体 的 文字 。 

333 任务 驱动 
1 任务 的 主要 内 容 


编写 一 个 网 页 ,网 页 中 的 文字 字体 既 有 粗 体 . 又 有 和 斜体。 网 页 运行 效果 如 图 3.5 所 示 。 


第 3 章 ”文字 布局 与 文字 效 天 欧 


二 


了 图 才 |http://localhost:8080/ch3/examnple3_3. htnl i 


图 > 
只 是 园 为 疾 作 登 办 多 天 了 阶 一 绩 ， 再 也 没 能 忘掉 你 的 容颜 。 习 
图 3.5 example3_3. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_3. html 中 的 【代码 了 蔡 换 为 HTML 代码 。 
example3_3. html 


<!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.orgVTRVhtml4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 3.html< /title> 
< /head> 
<body> 
<center> 
<font size="4"【 代 码 =" 黑 体 " color= "blue">< !-- 设 置 文字 字体 类 型 为 “黑体 ”-- > 
<i> 只 是 因为 在 人 群 中 多 看 了 你 一 眼 民 代码 3】 < !-- 使 用 <i> 标 记 设 置 斜 体 文字 -- > 
【代码 引 再 也 没 能 忘掉 你 的 容颜 。< /strong> < !-- 使 用 < strong> 标 记 设 置 粗 体 文字 --> 
</font> 
< /center> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

网 页 中 的 粗 体 与 斜体 文字 起 到 醒目 .强调 或 区 别 的 作用 。 一 段 文字 既 可 以 设置 斜体 , 同 
时 又 可 以 设置 粗 体 , 如 二 二 二 strong 二 既 斜 又 粗 的 文字 一 /strong 二 一 /i 一 。 

4 代码 模板 的 参考 答案 


【代码 1]: face 
【代码 3: < /i> 
【代码 习 : < strong> 


33a4 实践 环节 


编写 一 个 网 页 ,网 页 中 的 文字 大 小 为 “5 号 ,字体 为 “华文 宋体 ”, 颜 色 为 “red”, 部 分 文字 
加 查 ,部 分 文字 为 斜体 。 网 页 运行 效果 如 图 3. 6 所 示 。 
> > 国 喀 |http://1ocalhost:8080/ch3/3.3 实 路 环节 .htnl 加 区 
梦想 着 偶然 能 有 -- 天 再 相 见 ， 从化 我 开 奴 下 徊 多 食 。 


图 3.6 3. 3 实践 环节 网 页 运行 效果 


全 US CSS 网 页 设计 教学 做 一 体 化 教程 


Ey) 


3.4 上 标 与 下 标 


341 核心 知识 


在 一 个 网 页 中 可 能 有 数学 公式 \ 日 常 计算 、 书 籍 文章 注解 等 内 容 , 这 时 ,就 需要 使 用 上 标 
与 下 标 将 文字 以 小 字体 方式 显示 在 另 一 段 文 字 的 右上 角 或 右 下 角 。 上 标 与 下 标语 法 格式 
如 下 : 


<sup> 上 标 内 容 < /sup> 
<sub> 下 标 内 容 < /sub> 


这 两 种 标记 的 用 法 基本 相同 ,只 需 将 文字 放 在 标记 中 间 即 可 。 
34e ”能力 目标 

能 使 用 上 标 标记 一 sup 之 设置 文字 的 上 标 ,能 使 用 下 标 标记 <sub> 设 置 文字 的 下 标 。 
343 任务 驱动 


1. 任 务 的 主要 内 容 
编写 一 个 网 页 ,网 页 内 容 有 个 一 元 三 次 方程 ax 十 bx* 十 cx 十 d 二 0。 网 页 运行 效果 如 
图 3.7 所 示 。 


= 国 路 |http://l1ocalhost:6060/ch3/exanple3_4.html 


请 各 位 数学 天 才 找 到 下 列 方程 的 解 
ax’ tbx tcxtd=0 


图 3.7 example3_4. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_4. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 
example3_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 4.html< /title> 
< /head> 
<body> 
请 各 位 数学 天 才 找 到 下 列 方程 的 解 <br> 
a 巡 代码 1]+b 六 代码 2]+ cx+ d=0<! 一 代码 1 设置 上 标 为 3, 代 码 2 设置 上 标 为 2--> 
</body> 
</html> 


第 3 章 “文字 布局 本 赤 浊 攻 列 》 
oy 
3 任务 小 结 或 知识 扩展 ee 
上 标 与 下 标的 用 法 非常 简单 ,只 要 认识 什么 是 上 标 ,什么 是 下 标 ,就 可 以 运用 上 标 标记 
与 下 标 标记 制作 出 所 需要 的 网 页 。 
4 代码 模板 的 参考 答案 


【代码 11: < sup> 3< /sup> 
【代码 2]: < sup> 2< /sup> 


344 实践 环节 


编写 一 个 网 页 ,网 页 内 容 有 个 一 元 二 次 方程 x* 十 x 一 2 二 0 以 及 它 的 解 。 网 页 运行 效果 
如 图 3. 8 所 示 。 


1 已 图 路 |http://1ocalhost;8080/ch3/3.4 实 践 环节 . html ~ 


一 元 二 次 方程 x*+x-2=0 的 解 为 
x1=1 
2 


图 3.8 ”3.4 实践 环节 网 页 运行 效果 


3.5 删除 线 与 下 画 线 


351 核心 知识 
1. 设 置 文字 删除 线 
在 网 页 中 有 时 候 需要 给 文字 添加 删除 线 以 便 突 出 显示 ,< 志 strike 之 和 去 s 二 标记 都 可 以 
给 文字 添加 删除 线 ,语法 格式 如 下 : 


<strike> 删 除 的 文字 < /strike> 
<s> 删 除 的 文字 < /s> 


2 设置 文字 下 画 线 
在 网 页 中 有 时 候 需 要 给 文字 添加 下 画 线 以 表示 该 文字 重要 或 突出 显示 。 近 u 之 和 
过 ins 二 标记 都 可 以 给 文字 添加 下 面 线 , 语 法 格式 如 下 : 


<u> 有 下 画 线 的 文字 < /u> 
<ins> 有 下 画 线 的 文字 < /ins> 


35e 能力 目标 


能 使 用 一 u> 或 一 ins 之 标记 给 文字 添加 下 画 线 .能 使 用 一 strike 二 或 二 s 之 标记 给 文字 
添加 删除 线 。 
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353 任务 驱动 
1. 任务 的 主要 内 容 
编写 一 个 网 页 ,在 网 页 中 使 用 下 画 线 标注 出 自己 所 居住 过 的 城市 ,用 删除 线 标注 出 不 是 
自己 所 居住 过 的 城市 ,网 页 运行 效果 如 图 3. 9 所 示 。 
-5 国 |http://localhost:8060/ch3yexanple3_5. html 加 可 
请 选择 你 所 居住 过 的 城市 《) 。 
会 北京 
号 二 海 
CC 天津 
也 重庆 


图 3.9 example3_5. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_5. html 中 的 [代码 替换 为 HTML 代码 。 
example3_5. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 5.html< /title> 
< /head> 
<body> 
请 选择 你 所 居住 过 的 城市 ( )。<br> 
【代码 1]< /u><br> <!-- 使 用 标记 u 给 选项 “Ra. 北 京 " 添 加 下 画 线 --> 
<s>B. 上 海 </s><br> 
<strike>【 代 码 2]<br> <!-- 使 用 标记 strike 给 选项 *c. 天 津 " 添 加 删除 线 --> 


<ins>D. 重 庆 < /ins> 


< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 


从 任务 中 可 以 看 出 二 s 二 和 二 strike 二 标记 是 一 样 的 ,都 是 添加 删除 线 ; 二 u 二 和 二 ins 二 
标记 是 一 样 的 ,都 是 添加 下 画 线 。 删 除 线 标记 与 下 画 线 标记 的 用 法 相似 ,只 需 把 要 设置 的 文 
字 放 在 标记 中 间 即 可 。 在 网 页 制作 时 ,使 用 删除 线 标记 和 下 面 线 标记 的 主要 目的 是 使 文字 
突出 显示 。 

4 代码 模板 的 参考 答案 


【代码 1: <u>A. 北 京 
【代码 3 : c. 天 津 < /strike> 


364 ”实践 环节 
编写 一 个 网 页 ,在 网 页 中 使 用 删除 线 标 出 计算 错误 的 算式 ,使 用 下 夯 线 标 出 计算 正确 的 
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算式 。 网 页 运行 效果 如 图 3. 10 所 示 。 
国 内 http;//1ocalhost:8080/ch3/3.5 实 践 环节 . htnl 问世 | 
请 使 用 删除 线 标 出 计算 错误 的 算式 ， 使 用 下 画 线 标 出 计算 正确 的 算式 。 


图 3.10 3.5 实践 环节 网 页 运行 效果 


3.6 使 用 p 标记 设计 段落 格式 


a61 核心 知识 

1. 使 用 <p> 开始 一 个 新 段落 

制作 网 页 时 ,经常 需要 开始 一 个 新 段落 编写 文本 。 在 HTML 网 页 中 ,使 用 一 p 之 标记 
实现 一 个 新 段落 ,语法 格式 如 下 : 

<p> 段 落 的 内 容 < /p> 

开始 一 个 新 段落 可 以 使 用 成 对 的 二 p 二 标记 包含 一 个 段落 ,也 可 以 使 用 单独 的 二 p 二 标 
记 来 划分 段落 。 

2 设置 一 个 段落 文字 的 对 齐 方式 

去 p 二 标记 中 的 属性 align 能 够 设置 段落 中 文字 的 对 齐 方式 ,对齐 方 式 分 为 : 左 对 齐 、 居 
中 和 两 端 对 齐 ,语法 格式 如 下 : 

<p align= "对 齐 方式 "></p> 
其 中 ,align 的 取 值 为 left 时 ,文字 显示 左 对 齐 ;align 的 取 值 为 right 时 ,文字 显示 右 对 齐 ; 
align 的 取 值 为 center 时 ,文字 显示 居中 对 齐 。 

3. 设 置 段落 的 文字 方向 

在 制作 网 页 时 ,有 些 特殊 的 文字 需要 特殊 的 书写 方向 。 二 bdo 二 标记 就 可 以 实现 文字 
书写 方向 的 改变 ,语法 格式 如 下 : 

<bdo dir= "文字 方向 "> 文字 内 容 < /bdo> 
其 中 ,文字 方向 是 由 dir 属性 指定 的 ,dir 属性 值 有 ltr( 从 左 到 右 ) 和 rtl( 从 右 到 左 ) 两 种 , 默 
认 文 字 方向 为 从 左 到 右 。 

4 空 字符 &nbsp; 

在 HTML 网 页 中 使 用 空格 键 是 无 效 的 (因为 多 少 个 空格 键 浏览 器 都 看 成 一 个 空 
格 ) ,这 时 需要 使 用 空 字 符 “&nbsp;”。 空 字符 “&nbsp;” 里 面 的 符号 和 字母 都 是 半角 状 

5 换行 标 记 <br> 

换行 标记 二 br 二 在 不 男 起 一 段 的 情况 下 将 当前 文本 强制 换行 。 该 标记 是 一 个 没有 结尾 
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的 标记 ,HTML 网 页 中 任何 位 置 只 要 使 用 了 二 br 二 标记 ,该 位 置 之 后 的 文字 在 浏览 器 中 都 
会 在 下 一 行 显示 。 


362 能 力 目 标 


能 使 用 <p 二 标记 设置 段落 以 及 设置 段落 文字 的 对 齐 方式 ,能 使 用 一 bdo 二 标记 设置 段 
落 的 文字 方向 ,能 使 用 空 字符 “&nsp; ”设置 空格 ,能 使 用 换行 标记 二 br 二 强制 换行 。 


363 任务 驱动 


1. 任 务 的 主要 内 容 

编写 一 个 网 页 ,网 页 中 一 共有 三 段 文字 。 第 一 段 文字 对 齐 方式 为 居 左 ,文字 方向 为 从 左 
到 右 ; 第 二 段 文字 对 齐 方 式 为 居中 ,文字 方向 为 从 左 到 右 ; 第 三 段 文字 对 齐 方式 为 居 右 ,文字 
方向 为 从 右 到 左 。 网 页 运行 效果 如 图 3. 11 所 示 。 


> 5 BD |http://localhost:8080/ch3/exanple36. htnl 间 加 


我 是 第 一 段 的 文字 ， 文 字 对 齐 方式 默认 居 左 ， 文 字 方向 默认 从 左 到 右 。 
我 是 第 二 段 的 文字 ， 文 字 对 齐 方式 居中 ， 文 字 方向 默认 从 左 到 右 。 
。 左 到 右 从 向 方 宇文 ， 右 居 式 方 齐 对 字 文 ， 字 文 的 段 三 第 是 我 


图 3. 11 example3_6. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_6. html 中 的 [代码 替换 为 HTML 代码 。 
example3_6. html 


< !DOCTYPE html PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 6.html< /title> 
< /head> 
<body> 
<p> 我 是 第 一 段 的 文字 ,文字 对 齐 方 式 默认 居 左 ,文字 方向 默认 从 左 到 右 。< /p> 
<! 一 代码 1 使 用 align 设置 文字 居中 对 齐 一 > 
<p【 代 码 1]> 我 是 第 二 段 的 文字 ,文字 对 齐 方式 居中 ,文字 方向 默认 从 左 到 右 。< /p> 
<! 一 代码 2 使 用 align 设置 文字 居 右 对 齐 , 代 码 3 使 用 dir 设置 文字 方向 为 从 右 到 左 一 > 
<p【 代 码 2]><bdo【 代 码 引 > 我 是 第 三 段 的 文字 ,文字 对 齐 方 式 居 右 ,文字 方向 从 右 到 左 。 
</bdo>< /p> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

从 任务 中 可 以 看 出 段落 中 文字 的 对 齐 方式 默认 为 居 左 ,文字 方向 默认 为 从 左 到 右 。 其 
实 ,大 多 数 情 况 下 段落 中 的 文字 都 是 采用 默认 的 格式 ,偶尔 需要 指定 特殊 的 文字 才 进 行 段落 
文字 的 格式 设置 。 
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4 代码 模板 的 参考 答案 和 


【代码 1]: align= "center" 

【代码 3]: align= "right" 

【代码 习 : dir= "rtl" 
364 实践 环节 

编写 一 个 网 页 ,网 页 中 有 两 段 文字 ,一段 为 古诗 的 标题 和 作者 ,一段 为 古诗 的 内 容 ,两 段 
文字 对 齐 方式 都 为 居中 。 网 页 运行 效果 如 图 3. 12 所 示 。 


去 二 国史 |http://1ocalhost:8080/ch3/3.6 实 践 环 节 . html 


和 《 题 临安 邬 人 
[ 宗 ] 林 升 


山 外 青山 楼 外 楼 ， 西 湖 歌舞 几时 休 ? 
暖 风 票 得 游人 酬 ， 直 把 杭州 作 省 州 。 


图 3.12 3.6 实践 环节 网 页 运行 效果 


3.7 水 平 线 


37.1 核心 知识 
水 平 线 在 网 页 中 可 以 分 隔 网 页 的 内 容 , 使 网 页 内 容 结 构 清晰 、 层 次 分 明 , 便 于 浏览 。 使 

用 二 hr 二 就 可 以 在 网 页 中 添加 一 条 水 平 线 , 来 分 隔 不 同 的 文字 内 容 , 语 法 格式 如 下 : 

<hr width= "宽度 " size= "高度" color= "水 平 线 的 颜色 " align= "对 齐 方式 " noshade> 


其 中 ,width 属性 值 可 以 是 绝对 的 像素 值 ,也 可 以 是 相对 的 百分比 ;size 属性 值 只 能 使 用 绝对 
的 像素 值 来 定义 ;color 属性 用 来 设置 水 平 线 的 颜色 ;align 属性 用 来 设置 水 平 线 的 对 齐 方 
式 ;noshade 可 以 在 网 页 中 去 掉 水 平 线 的 阴影 。 


37 能 力 目标 
能 使 用 二 hr 二 标记 及 它 的 属性 来 设置 所 需要 的 水 平 线 。 
373 任务 驱动 


1. 任务 的 主要 内 容 
写 一 个 网 页 ,网 页 中 一 共有 三 段 文字 。 第 一 段 文字 与 第 二 段 文字 之 间 有 条 水 平 线 , 该 
水 平 线 的 宽度 为 500 像素 ,高 度 为 2 像素 ,颜色 为 红色 ,对 齐 方式 居中 。 第 二 段 文字 与 第 三 
段 文 字 之 间 有 条 水 平 线 , 该 水 平 线 的 宽度 为 800 像素 ,高 度 为 5 像素 ,颜色 为 绿色 ,对齐 方式 
居中 。 网 页 运行 效果 如 图 3. 13 所 示 。 


2 任务 的 代码 模板 
将 下 列 example3_7. html 中 的 [代码 替换 为 HTML 代码 。 
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0 
园 
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http: //localhost:B080/ch3/exanple3_7. htnl 加 可 国 
《于 易 水 送 人 一 绝 》 
骗 宾 王 
此 地 别 燕 丹 ， 


《 送 杜 少 府 之 任 易 州 》 
王勃 


域 阅 辅 三 秦 ， 
风 烟 望 五 津 。 
与 君 离别 意 ， 
同 是 宦 游 人 。 
海内 存 知己 ， 
天 涯 若 比 邻 ， 
无 为 在 歧路 ， 
儿女 共 沾 巾 。 
《 赠 汪 伦 > 
李白 
李白 乘 舟 将 欲 行 ， 
忽 闻 岸上 踏歌 声 。 
桃花 淹 水 深 千 尺 ， 
不 及 汪 伦 送 我 情 。 


图 3.13 example3_7. html 运行 效果 


example3_7. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 7.html< /title> 
< /head> 
<body> 
<P align= "center">《 于 易 水 送 人 一 绝 》<br>< font size="2"> 骆 宾 王 < /font><br> 
此 地 别 燕 丹 ,<br> 
壮士 发 冲 冠 。<br> 
昔 时 人 已 没 ,<br> 
今日 水 犹 寒 。<br> 
</p> 
【代码 1] < !-- 使 用 hr 标记 设置 一 条 宽度 为 500 像 素 , 高 度 为 2 像素 ,颜色 为 红色 ,对 齐 方式 居中 
的 水 平 线 一 > 
<p align= "center">《 送 杜 少 府 之 任 蜀 州 )<br>< font size= "2"> 王 勃 </font><br> 
城 阅 辅 三 秦 ,<br> 
风 烟 望 五 津 。<br> 
与 君 离别 意 ,<br> 
同 是 宦 游 人 。<br> 
海内 存 知己 ,<br> 
天 涯 若 比邻 。<br> 
无 为 在 歧路 ,<br> 
儿女 共 沾 巾 。<br> 
</p> 


【代码 2]< ! 一 使 用 hr 标记 设置 一 条 宽度 为 800 像素 ,高 度 为 5 像素 ,颜色 为 绿色 ,对 齐 方式 居中 
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的 水 平 线 一 > 
<p align= "center">《 赠 汪 伦 ?<br>< font size= "2"> 李 白 </font><br> 
李白 乘 舟 将 欲 行 ,<br> 
忽 闻 岸上 踏歌 声 。<br> 
桃花 潭 水 深 千 尺 ,<br> 
不 及 汪 伦 送 我 情 。<br> 
</p> 
< /body> 
</htm> 


3. 任务 小 结 或 知识 扩展 

从 任务 中 可 以 看 出 在 段落 文字 之 间 使 用 水 平 线 可 以 使 文字 内 容 结构 清晰 ` 层 次 分 明 。 在 
没有 指定 水 平 线 的 对 齐 方式 时 ,默认 为 居中 。 在 没有 指定 水 平 线 的 颜色 时 ,默认 为 灰 黑 色 。 

4 代码 模板 的 参考 答案 


【代码 11: <hr width= "500" size= "2" color= "red" align= "center"> 
【代码 3]: <hr width= "800" size= "5" color= "green" align= "center"> 


374 实践 环节 


编写 一 个 网 页 ,网 页 中 有 两 段 文字 ,两 段 文 字 之 间 有 条 水 平 线 , 该 水 平 线 的 宽度 为 700 像素 ， 
高 度 为 4 像素 ,颜色 为 蓝 色 ,对 齐 方式 默认 ,去 掉 水 平 线 的 阴影 。 网 页 运行 效果 如 图 3. 14 所 示 。 
SS 国 和 |htt://1localhost'8090/ch3/3 7 实践 环节 .htnl 司 e 男 
《 赠 汪 伦 》 
李白 
李白 乘 舟 将 欲 行 ， 
忽 闻 岸上 踏歌 声 。 
桃花 潭 水 深 千 尺 ， 
不 及 汪 伦 送 我 情 。 


< 
案 雨 连 江 夜 入 吴 ， 
平 明 送 客 林山 巴 。 
洛阳 亲友 如 相 问 ， 
一 片 洒 心 在 玉 碍 , 


图 3.14 3.7 实践 环节 网 页 运行 效果 


3.8 文字 滚动 


381 核心 知识 


1. 滚动 方向 
文字 滚动 的 方向 ,默认 情况 下 是 从 右 向 左 的 ,但 可 以 通过 过 marquee 之 标记 里 的 
direction 属性 来 改变 文字 滚动 的 方向 ,语法 格式 如 下 : 


<marquee direction= "滚动 方向 "> 滚动 的 文字 < /marquee> 
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其 中 ,direction 的 值 有 up、down、left 和 right 四 个 值 .分 别 表示 向 上 、 向 下 、 向 左 和 向 右 深 
动 , 向 左 滚动 就 是 默认 情况 。 

2 滚动 方式 

文字 滚动 的 方式 ,默认 情况 下 是 循环 滚动 .但 可 以 通过 一 marquee 之 标记 里 的 behavior 
属性 来 改变 文字 滚动 的 方式 ,语法 格式 如 下 : 

<marquee behavior= "滚动 方式 "> 滚动 的 文字 < /marquee> 
其 中 ,behavior 的 值 有 scroll slide 和 alternate 三 个 ,分 别 表 示 循 环 滚动 .只 滚动 一 次 和 来 回 
交替 滚动 。 

3. 滚 动 次 数 

文字 滚动 的 方式 ,默认 情况 下 是 循环 滚动 的 ,如 果 和 希望 滚动 几 次 就 停止 ,可 以 通过 
过 marquee 二 标记 里 的 loop 属性 来 设置 滚动 的 次 数 ,语法 格式 如 下 : 


<marquee loop= "滚动 次 数 "> 滚动 的 文字 < /marquee> 
其 中 ,loop 的 值 为 整数 。 


4 滚动 速度 
二 marquee 记 标记 里 的 scrollamount 属性 可 以 设置 文字 滚动 的 快慢 ,语法 格式 如 下 : 


<marquee scrollamount= "滚动 速度 "> 滚动 的 文字 < /marquee> 
其 中 ,滚动 速度 实际 上 是 设置 文字 每 次 移动 的 长 度 , 以 像素 为 单位 。 
5 滚动 延迟 
二 marquee 二 标记 里 的 scrolldelay 属性 可 以 设置 文字 滚动 的 时 间 间 隔 ,语法 格式 如 下 : 
<marquee scrolldelay= "时 间 间 隔 "> 滚 动 的 文字 < /marquee> 
其 中 ,滚动 时 间 间 隔 单位 是 毫秒 ,如 果 设 置 的 时 间 比 较 长 ,会 产生 走 走 停 停 的 效果 。 
6. 滚 动 区 域 的 背景 颜色 


二 marquee 之 标记 里 的 bgcolor 属性 可 以 设置 文字 滚动 区 域 的 背景 色 , 以 显示 突出 , 语 
法 格式 如 下 : 


<marquee bgcolor= "背景 颜色 "滚动 的 文字 < /marquee> 
其 中 ,bgcolor 的 值 可 以 是 一 个 已 命名 的 颜色 ,也 可 以 是 一 个 十 六 进 制 的 颜色 值 。 


7. 滚 动 背景 宽度 和 高 度 
默认 情况 下 ,滚动 文字 的 背景 与 文字 同 高 ,与 浏览 器 窗口 同 宽 , 使 用 width 和 height 标 
记 可 以 设置 水 平和 垂直 的 范围 ,语法 格式 如 下 : 


<marquee width= "背景 宽度 " height= "背景 高 度 必 滚动 的 文字 < /marquee> 

其 中 ,背景 宽度 和 背景 高 度 都 是 以 像素 为 单位 的 。 
382 能 力 目标 
能 使 用 二 marquee> 标 记 里 的 各 种 属性 设 转 文字 滚动 效果 。 


第 3 章 “文字 布局 与 坟 宣 区 区 9》 
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383 任务 驱动 


1. 任务 的 主要 内 容 
写 一 个 网 页 ,网 页 中 有 一 段 滚动 的 文字 ,文字 滚动 方向 为 默认 方向 ,文字 滚动 的 背 
景色 为 蓝 色 ,文字 颜色 为 白色 ,文字 滚动 方式 为 来 回 交替 滚动 。 网 页 运行 效果 如 图 3. 15 
所 示 。 


了 国 S$ [http://localhost:8080/ch3/exanple3_8. htnl 回忆 回 


桃花 潭 水 深 千 尺 ， 
不 及 汪 伦 送 我 情 。 


哈 ， 


图 3.15 example3_8. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example3_8. html 中 的 [代码 替换 为 HTML 代码 。 
example3_8. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example3 8.html< /title> 
< /head> 
<body> 
<p align= "center">《 赠 汪 伦 )<br>< font size= "2"> 李 白 </font><br> 
李白 乘 舟 将 欲 行 ,<br> 
忽 闻 岸 上 踏歌 声 。<br> 
桃花 潭 水 深 千 尺 ,<br> 
不 及 汪 伦 送 我 情 。<br> 
</p> 
<marquee bgcolor= "blue 吧 代码 1]>< !-- 代 码 1 使 用 behavior 设置 文字 滚动 方式 为 来 回 交替 
-> 
< ! 一 代码 2 设置 文字 颜色 为 白色 --> 
<fon 共 代码 2]> 大 家 好 ,我 正在 学 习 (古诗 三 百 首 ), 哈 哈 ,羡慕 嫉妒 恨 吧 !< /font> 
< /marquee> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 


目前 学 习 的 文字 滚动 效果 ,只 是 简单 的 滚动 。 要 想 做 出 非常 漂亮 的 滚动 效果 ,等 学 习 完 
网 页 布局 ,CSS 和 JavaScript 就 可 以 。 


页 设计 教学 做 一 体 化 教程 


4 代码 模板 的 参考 答案 


【代码 11 : behavior= "alternate" 
【代码 3 : color= "white" 


384 实践 环节 


编写 一 个 滚动 的 公告 板 ,具体 要 求 如 下 : 
。 公告 板 的 内 容 字 体 类 型 是 楷体 _GB2312; 
。 公告 板 的 内 容 要 不 停 地 从 下 向 上 来 回 交替 滚动 ,网 页 运行 效果 如 图 3. 16 所 示 。 


己 国 [http://1ocalhost:8080/ch3/ 习 题 3-13. htnl 间 


傻 傻 足球 队 纳 新 通知 


伪作 俱乐部 是 国内 项 弛 俱乐部 ， 号 称 中 国 国家 队 的 后 花园 。 有 足球 运动 爱好 的 各 位 同胞 ， 请 迅速 到 伪 售 但 
乐 部 报到 。 机 不 可 失 ， 失 不 再 来 ! 大 家 赶快 行动 吧 ! 


传 僵 俱 乐 部 
2012 年 10 月 18 日 


图 3.16 3. 8 实践 环节 网 页 运行 效果 


3.9 小 结 


设计 网 页 中 文本 内 容 时 所 使 用 的 标记 除了 本 章 介 绍 的 二 h>、 志 font 二 所 p 二 、 
< 一 strong 二 一 strike 二 一 hr 二 一 marquee 二 等 常用 标记 外 ,还 有 个 别 不 常用 的 标记 ,如 
去 nobr>、 志 pre> 等 。 这 些 没 有 介绍 的 标记 ,读者 可 以 查阅 相关 资料 自主 学 习 。 

本 章 的 重点 是 如 何 使 用 二 h>、 二 font>、 二 p>、 二 hr>、 壹 marquee 盖 等 标记 设计 文本 


内 容 。 
习 题 3 
1. 下 面 哪 一 个 属性 不 是 文本 的 标记 属性 ? ( ) 
A. nbsp B. align C. color D. face 
2. 下 面 哪 一 项 是 换行 标记 ? ( ) 
A. =body> B. =font> C= br D; <p> 
3. 在 HTML 中 ,标记 二 font 二 的 size 属性 最 大 取 值 可 以 是 (。 )。 
A. 5 B. 6 E D. 8 
4. 以 下 标记 中 ,没有 对 应 的 结束 标记 的 是 ( )。 
A. =body> B 过 br C. <html> D. <~title> 


5. 车 要 以 加 粗 宋体 、12 号 字 显 示 “vbscript”, 以 下 选项 中 正确 的 是 ( bE 
A. =b><font size=12>vbscript</b><=</font> 


10. 


生 3 刘 文字 布局 5 又 归 》 


B. 二 b 这 过 font face 二 "宋体 " size= 二 12 之 vbscript</font> 达 /b 这 
C. 一 b> 二 font size= 二 "宋体 "size= 二 12 之 vbscript 达 /b 记 过 /font> 
D. 一 b> 一 font size 二 "宋体 " fontsize 二 12 之 vbscript 二 /b 记 过/font> 


.以 下 标记 中 ,可 用 来 产生 滚动 文字 的 是 ( 和 


A. =Scroll> B. =Marquee> 
C. <TextArea> D. <IFRAME> 


. 下 列 关 于 HTML 标题 说 法 错误 的 是 ( ks 


A. 标题 标记 为 二 hn> ,其 中 n 为 标题 的 等 级 

B. HTML 提供 6 个 等 级 的 标题 ,n 越 小 ,标题 的 字号 就 越 大 
C. HTML 必须 出 现 标 题 标记 

D. HTML 可 以 不 出 现 标 题 标记 


.下 面 说 法 中 错误 的 是 (  )。 


A. 二 p> 二 /p> 标 记 对 用 来 创建 一 个 段落 
B. 二 br> 标 记 用 来 创建 一 个 回 车 换行 
C. 去 p 二 可 以 有 多 种 属性 

D. 换行 标记 过 br 之 也 有 结束 标记 二 /br 


.下 面 说 法 中 正确 的 是 ( ) 。 


A. 我 们 只 能 通过 设置 绝对 字号 的 方法 ,设置 字体 大 小 

B. 设置 文本 的 字号 有 两 种 办 法 : 一 种 是 设置 绝对 字号 , 另 一 种 是 设置 文本 的 相对 
字号 

C.“ 十 ?号 表示 字体 变 小 

D.“ 一 ”号 表示 字体 变 大 

下 列 对 于 滚动 字符 说 法 错误 的 是 (  )。 

A. 在 HTML 页面 中 可 以 用 二 marquee 二 二 /marquee 二 标记 对 实现 文字 的 滚动 

B， color 属性 用 于 设 定 活动 字幕 的 背景 颜色 

C.Direction 属性 用 于 设 定 活动 字幕 的 滚动 方向 

D. scrolldelay 属性 用 于 设 定 两 次 滚动 之 间 的 延迟 时 间 


.编写 一 个 数学 试卷 网 页 ,具体 要 求 如 下 : 


。 试卷 名 称 是 标题 2(h2) ,每 道 题 的 题 干 是 标题 4(h4); 

。 请 使 用 下 夯 线 标 出 正确 答案 ; 

。 每 道 题 的 内 容 在 网 页 中 占 独立 一 段 (p) , 段 和 段 之 间 有 个 水 平 线 (hr) 
。 网 页 运行 效果 如 图 3. 17 所 示 。 


. 编写 一 个 网 页 ,网 页 中 有 三 段 滚 动 的 文字 ,具体 要 求 如 下 : 


。 一 段 文字 滚动 方向 为 向 上 ,文字 滚动 的 背景 色 为 红色 ,文字 滚动 5 次 就 停止 
滚动 ; 

*。 第 二 段 文字 滚动 方向 为 向 右 ; 

。 第 三 段 文字 滚动 的 背景 色 为 灰色 ,文字 滚动 方式 为 来 回 交 蔡 滚 动 ， 

。 没有 指明 的 属性 值 就 是 默认 的 ,网 页 运行 效果 如 图 3. 18 所 示 。 
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一 、 选 择 题 (每 题 3 分 》 
1 方程 x*+2x+1=0 的 解 是 C 》。 


A. x1i=x2=1 
=x2=-1 

C. xi=x2=0 

D. 无 解 


2. 方程 x*-2x+1=0 的 解 是 ( 》。 
A x1=x2=1 


B. x1=x2=-1 
C. x1=x2=0 
D. 无 解 


图 3.17 习题 3-11 网 页 运行 效果 


http://1ocalhost ;8060/ch3/ 避 题 3-12. htnl 


《这 导 少 诊 宫 任 遇 州 > 
域 网 辅 三 秦 ， 


儿女 共 沾 巾 。 


图 3.18 习题 3-12 网 页 运行 效果 


在 一 个 网 页 中 ,列表 用 来 设置 结构 化 的 、 易 读 的 文本 格式 ,可 以 帮助 用 户 方便 地 找到 信 
息 ,并 引起 用 户 对 信息 的 注意 。 本 章 将 介绍 各 种 不 同类 型 的 列表 ,包括 无 序列 表 、 有 序列 表 
以 及 多 级 列表 。 


4.1 无 序列 表 


41.1 核心 知识 


1. 无 序列 表 标 记 dl 

ul 标记 用 于 设置 无 序列 表 , 在 每 个 列表 项 目 文字 之 前 ,以 项 目 符号 作为 每 条 列表 项 的 
前 级 ,各 个 列表 没有 级 别 之 分 。 无 序列 表 语 法 格式 如 下 : 

<ul> 


<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


</ul> 


其 中 ,二 ul 二 表示 无 序列 表 的 开始 ,二 /ul 二 表示 无 序列 表 的 结束 ,一 li 二 表示 一 个 列表 项 的 
开始 ,一 /li 表示 一 个 列表 项 的 结束 。 


2 无 序列 表 的 项 目 符号 

无 序列 表 的 项 目 符号 ,默认 情况 下 是 *。”, 而 通过 ul 标记 的 type 属性 可 以 改变 无 序列 
表 的 项 目 符号 ,避免 项 目 符号 的 单调 .语法 格式 如 下 : 

<ul type= "符号 类 型 "> 


<1i> 列 表 项 < /1i> 
<1i> 列 表 项 </1i> 


(1 人 SCSS 同 页 设计 教学 做 一 体 化 教程 


</ul> 
其 中 ,type 属性 值 决 定 了 列表 项 目的 符号 。 当 type 属性 值 为 disc 时 ,项 目 符号 为 *。”; 当 
type 属性 值 为 circle 时 ,项 目 符号 为 *。”; 当 type 属性 值 为 square 时 ,项 目 符号 为 *，”。 

3. 定义 列表 标记 dl 

dl 标记 用 于 名 词 解释 ,包括 定义 名 称 和 定义 内 容 。 定 义 列表 由 过 dl 之 开始 ,由 志 /dl> 
结尾 。 志 dt> 用 来 指定 定义 名 称 , 志 dd> 用 来 指定 定义 内 容 。 定 义 列表 语法 格式 如 下 : 


<dl> 
<dt> 定 义 名 称 < /dt> 
<dd> 定 义 内 容 </dd> 
<dt> 定 义 名 称 < /dt> 
<dd> 定 义 内 容 < /dd> 


</dl> 


其 中 ,二 dl 二 标记 定义 了 定义 列表 的 开始 ,二 /dl 二 定义 了 定义 列表 的 结束 。 二 dt 二 后 面 就 
是 要 解释 的 名 称 ,二 dd 二 后 面 则 添加 该 名 词 的 具体 解释 。 


412 能力 目标 
能 够 使 用 ul 标记 设计 无 序列 表 , 并 会 使 用 type 属性 设置 项 目 符号 ;能 够 使 用 dl 标记 设 

计 定 义 列 表 。 

413 任务 驱动 


1 任务 的 主要 内 容 
编写 一 个 网 页 (效果 如 图 4. 1 所 示 ) ,在 网 页 中 定义 一 个 无 序列 表 , 列 表 项 目 符号 为 "。 
”。 另外 ,该 网 页 中 还 有 个 定义 列表 ,定义 名 称 是 “俱乐部 ”。 


> 5 加 |http://localhost:8080/ch4/exanple4_l. htnl BP 而 


无 序列 表 -- 车 类 


定义 列表 -- 俱 乐 部 


俱乐部 
俱乐部 《又 称 会 所 ;英文 ，Chub) 单 人 字面 上 理解 就 是 人 们 聚集 在 一 起 进行 
娱乐 活动 的 组 织 团体 或 者 其 场所 ， 严 格 解释 是 具有 某 种 相同 兴趣 的 人 进行 社 
会 交际 、 文 化 娱乐 等 活动 的 团体 和 场所 。 


4.1 example4_1. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example4_1. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 


第 4 章 列表 
‘41 
example4_1. html wal 
< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 

loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example4 1.html< /title> 
< /head> 
<body> 
<h2> 无 序列 表 一 车 类 < /h2> 
<ul【 代 码 1]> < !-- 设 置 列表 项 目 符号 为 *。”--> 
<1i> 小 轿车 </1i> 
<1i> 小 货车 </1i> 
<1i> 重 卡 </1i> 
</ul> 
<h2> 定 义 列表 一 俱乐部 < /h2> 
【代码 2] < !-- 定 义 列表 开始 --> 
<dt> 俱 乐 部 < /at> 
<dd> 俱 乐 部 (又 称 会 所 ;英文 : club) 单 从 字面 上 理解 就 是 人 们 聚集 在 一 起 进行 娱乐 活动 的 
组 织 团体 或 者 其 场所 ,严格 解释 是 具有 某 种 相同 兴趣 的 人 进行 社会 交际 、 文 化 娱乐 等 
活动 的 团体 和 场所 。< /dd> 
【代码 引 < !-- 定 义 列表 结束 --> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 
从 任务 中 可 以 看 出 定义 列表 的 项 目 是 没有 项 目 符号 的 。 另 外 ,定义 列表 的 标记 所 dl 一 


首尾 必须 成 对 出 现 ,而 二 dt 和 所 dd 的 结尾 标记 是 可 以 省 略 的 。 


4 代码 模板 的 参考 答案 


【代码 11: type= "circle" 
【代码 3 了: <dl> 
【代码 习 : < /dl> 


414 实践 环节 


把 example4_1. html 中 的 [代码 1] 蔡 换 成 “type 二 "square"”.【 代 码 2 替换 成 “一 dl type 一 


"circle" 二 ”, 然 后 运行 example4_1. html 网 页 ,并 分 析 网 页 的 显示 效果 。 


4.2 有 序列 表 


所 1 核心 知识 


1 有 序列 表 标记 ol 
有 序列 表 中 的 项 目 采用 数字 或 英文 字母 开头 ,通常 各 项 目 之 间 是 有 先后 顺序 的 。 有 序 


列表 语法 格式 如 下 : 


人 SICGSS 网 页 设计 教学 做 一 体 化 教程 


gn) 


<ol> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 < /1i> 


</ol> 


其 中 ,二 ol 二 表示 有 序列 表 的 开始 ,二 /ol 二 表示 有 序列 表 的 结束 ,二 li 二 表示 一 个 列表 项 的 
开始 ,二 /li 二 表示 一 个 列表 项 的 结束 。 

2 有 序列 表 的 项 目 类 型 

有 序列 表 同 无 序列 表 一 样 ,也 有 项 目 类 型 ,也 可 以 通过 type 属性 设置 自己 的 项 目 类 型 。 
默认 情况 下 ,有 序列 表 的 项 目 序号 是 数字 ,语法 格式 如 下 : 

<ol type= "序号 类 型 "> 


<1i> 列 表 项 < /1i> 
<1i> 列 表 项 < /1i> 


</ol> 


其 中 ,type 属性 决定 项 目 序号 的 类 型 。 当 type 属性 值 为 1 时 ,项 目 序号 为 “1、2、3、4…”; 当 
type 属性 值 为 a 时 ,项 目 序号 为 “a、b、c、d…”; 当 type 属性 值 为 A 时 ,项 目 序号 为 “A、B、C、 
D…”; 当 type 属性 值 为 1 时 ,项 目 序号 为 i、ii、 诈 、iV…”; 当 type 属性 值 为 工时 ,项 目 序号 
为 “Ls Ds 

3. 有 序列 表 的 起 始 数 值 

默认 情况 下 ,有 序列 表 的 序号 是 从 1 开始 的 ,但 可 以 通过 start 属性 改变 序号 的 起 始 值 ， 
语法 格式 如 下 : 

<ol start=" 起 始 数 值 "> 


<1i> 列 表 项 < /1i> 
<1i> 列 表 项 < /1i> 


</ol> 
其 中 ,起 始 数值 只 能 是 数字 ,但 是 同样 对 字母 或 罗马 数字 起 作用 。 例 如 ,项 目 类 型 为 a, 起 始 
值 为 5 ,那么 项 目 序 号 就 从 英文 字母 e 开始 编号 。 
<ee 能力 目标 
能 够 使 用 ol 标记 设计 有 序列 表 , 会 使 用 type 属性 设置 项 目 序号 ;能 够 使 用 start 属性 设 
定 序号 的 起 始 值 。 
423 任务 驱动 
1. 任 务 的 主要 内 容 
写 一 个 网 页 ,具体 要 求 如 下 : 


。 网 页 中 有 个 二 h2 二 标题 :“ 计 算 机 网 络 专业 的 学 生 应 该 具备 的 能 力 ”; 
。 网 页 中 有 个 有 序列 表 描述 各 项 能 力 ,列表 项 目 序号 为 1、2、3、4*…”; 


。 网 页 运行 效果 如 图 4.2 所 示 。 


S$ http://locslhost:8080/chA/exanple4_ 2. htnl 间 国 


计算 机 网 络 专业 的 学 生 应 该 具备 的 能 力 


办 公 自动 化 能 力 
计算 机 硬件 选 购 与 测试 能 力 
计算 机 组 装 与 维护 能 力 

网 站 建设 与 维护 能 力 
动态 网 页 设计 能 力 

数据 库 管理 与 维护 能 力 

局 域 网 络 规划 、 就 
局 域 网 络 管理 与 维护 能 力 
人 

10. 数据 恢复 

it 放 让 攻 把 生 管理 能 力 
12. 网 络 安全 与 管理 能 力 


图 4.2 example4_2. html 运行 效果 


Cl been 


站 


2 任务 的 代码 模板 
将 下 列 example4_2. html 中 的 [代码 3 替换 为 HTML 代码 。 
example4_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example4 2.html< /title> 
< /head> 
<body> 
【代码 1] < !-- 设 置 h2 标 题 “计算 机 网 络 专业 的 学 生 应 该 具备 的 能 力 ”--> 
【代码 2] < !-- 设 置 有 序列 表 并 且 项 目 符号 为 “1、2、3、4…”--> 
<1i> 办 公 自 动 化 能 力 < /1i> 
<1i> 计 算 机 硬件 选 购 与 测试 能 力 < /1i> 
<1i> 计 算 机 组 装 与 维护 能 力 < /1i> 
<1i> 网 站 建设 与 维护 能 力 < /1i> 
<1i> 动 态 网 页 设计 能 力 < /1i> 
<1i> 数 据 库 管 理 与 维护 能 力 < /1i> 
<1i> 局 域 网 络 规划 安装 与 调试 能 力 < /1i> 
<1i> 局 域 网 络 管理 与 维护 能 力 < /1i> 
<1i>Linux 网 络 管理 能 力 < /1i> 
<1i> 数 据 恢复 能 力 < /1i> 
<1i> 路 由 器 与 交换 机 配置 与 管理 能 力 < /1i> 
<1i> 网 络 安全 与 管理 能 力 < /1i> 
【代码 引 < !-- 有 序列 表 结 束 一 > 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 
如 果 有 序列 表 的 项 目 编号 是 罗马 数字 ,那么 编号 一 般 控制 在 20 以 内 。 如 果 罗 马 数字 较 
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大 ,不 仅 需 要 调整 显示 空间 ,而 且 读 者 很 难 直 观 地 把 罗马 数字 同 阿 拉 伯 数字 联系 起 来 。 
4 代码 模板 的 参考 答案 


【代码 1]: <h2> 计 算 机 网 络 专业 的 学 生 应 该 具备 的 能 力 < /h2> 
【代码 2]: <ol type="1"> 
【代码 3]: < /cl> 


424 实践 环节 
编写 一 个 网 页 ,具体 要 求 如 下 : 
页 中 有 个 二 h2 二 标题 “计算 机 网 络 专业 的 学 生 应 该 学 习 的 课程 ”; 
。 网 页 中 有 个 有 序列 表 描 述 所 学 习 的 课程 ,列表 项 目 编号 为 “A、B、C、D…”, 但 项 目 编 
号 从 下 开始 ; 
。 网 页 运行 效果 如 图 4. 3 所 示 。 


富国 办 |http://1ocalhost:8060/ch4/4. 2 实践 环节 . htnl 闻 区 


计算 机 网 络 专业 的 学 生 应 该 学 习 的 课程 
E. 网 站 建设 与 维护 


L 静 术 网 页 制作 
图 4.3 4.2 实 践 环节 . html 运行 效果 


4.3 铸 套 序列 表 


431 核心 知识 


无 序列 表 和 有 序列 表 的 嵌 套 是 常见 的 列表 赃 套 ,多 次 使 用 二 ol 二 和 二 ul 二 标记 就 可 以 
组 合 出 多 种 嵌 套 形式 ,语法 格式 如 下 : 


<ul> 
<1i> 名 词 一 
<ol> 
<1i> 列 表 项 
<1i> 列 表 项 


</ol> 
<1i> 名 词 二 
<ol> 
<1i> 列 表 项 
<1i> 列 表 项 


</ol> 


</ul> 


432 ”能力 目标 


能 够 使 用 无 序列 表 标 记 二 ul 二 和 有 序列 表 标 记 二 ol 二 设计 酝 套 列表 。 


433 任务 驱动 


1. 任 务 的 主要 内 容 

编写 一 个 网 页 ,具体 要 求 如 下 : 

。 网 页 中 有 个 无 序列 表 ,列表 项 目 符号 为 <。” 

。 无 序列 表 中 共有 两 个 列表 项 目 , 分 别 是 “爱情 的 定义 ?和 * 爱 情 的 分 类 ”， 
“爱情 的 定义 ”列表 项 目 中 舱 套 一 个 有 序列 表 ,该 有 序列 表 是 对 爱情 进行 定义 ; 
“爱情 的 定义 ?列表 项 目 中 的 有 序列 表 的 项 目 编号 为 "1、2、3、4…”; 

“爱情 的 分 类 ”列表 项 目 中 舱 套 一 个 有 序列 表 ,该 有 序列 表 是 对 爱情 进行 分 类 ; 
“爱情 的 分 类 ”列表 项 目 中 的 有 序列 表 的 项 目 编号 为 " 工 . 工 .下 、N…”， 

网 页 中 的 文字 出 自 网 站 http://baike. baidu. com/view/1348. htm; 

网 页 运行 效果 如 图 4.4 所 示 。 


Sm [ht /locuhost.060/chA/exanple4_ 3. htnl 加 


妥 情 的 定义 
1 要 入 (X) ， 人 之 间 相 瑟 要 的 丰 情 ， 是 丙 王 结 至 关 的 关中 和 情 
2 爱情 (广义 ) ， 人 时 各 情 ， 包 反 析 拉 轩 式 扣 于 为 


守 的 帮 必 ， 超越 了 性 别 、 时 空 。 所 有 关系 到 爱 的 情感 都 叫 爱 | 
父子 之 情 ， 亲 友之 情 ， 汪汪 情 但 之 情 等 
3 要 人 ， 好 的 爱情 是 双方 以 自由 为 最 高 赠礼 的 酒 脱 ， 以 及 绝 
不 洛 用 这 一 份 自由 的 珍 异 


4 爱情 《 普 》， 双 方 价值 观 、 人 生 现 的 共鸣 加 上 原始 本 能 的 相互 吸引 。 
人 相互 吸引 在 于 价值 观 、 人 生 观 的 认同 产生 
心理 的 居 悦 从 而 产生 依赖 感 

a 爱情 (科学 意义 ) ， 交情 是 种 : “精神 病 ”。 


WI 柏拉图 式 
图 4.4 example4_3. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example4_3. html 中 的 [代码 ] 替 换 为 HTML 代码 。 
example4_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/ 
loose.dtd"> 
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<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> example4 3.html< /title> 
</head> 
<body> 
<ul> 
【代码 1】 < ! 一 设置 列表 项 目 “ 爱 情 的 定义 ”一 > 
【代码 2]< !-- 设 置 有 序列 表 ol 的 开始 标记 一 > 
<1i> 爱 情 (狭义 ): 人 之 间 相互 爱恋 的 感情 ,是 至 高 至 纯 至 美的 美感 和 情感 体验 。 
</li> 
<1i> 爱 情 广义 ): 人 与 人 之 间 相互 爱恋 的 感情 ,包括 柏拉图 式 的 更 为 真挚 和 纯粹 
的 感情 ,超越 了 性 别 、 地 域 .时 空 。 所 有 关系 到 爱 的 情感 都 叫 爱 情 。 父 子 之 
情 , 亲 友之 情 , 师 生 之 情 ,情侣 之 情 等 。< /1i> 
<1i> 爱 情 (好 坏 定义 ) : 好 的 爱情 是 双方 以 自由 为 最 高 赠礼 的 酒 脱 ,以 及 绝 不 滥用 
这 一 份 自由 的 珍惜 。< /1i> 
<1i> 爱 情 ( 普 ) : 双方 价值 观 、 人 生 观 的 共鸣 加 上 原始 本 能 的 相互 吸引 。 因 此 爱情 
大 多 指向 男女 之 间 ,相互 吸引 在 于 价值 观 、 人 生 观 的 认同 产生 心理 的 愉悦 从 
而 产生 依赖 感 。< /1i> 
<1i> 爱 情 (科学 意义 ) : 爱情 是 一 种 “精神 病 ”。< /1i> 
</ol> 
【代码 3] < !-- 设 置 列 表 项 目 “ 爱 情 的 分 类 ”--> 
【代码 4】< !-- 设 置 有 序列 表 并 且 项 目 符号 为 I、 、H、N…”--> 
<1i> 浪 漫 激情 式 < /1i> 
<1i> 好 朋友 式 < /1i> 
<1i> 游 戏 式 < /1i> 
<1i> 占 有 式 < /1i> 
<1i> 现 实 式 < /1i> 
<1i> 利 他 式 < /1i> 
<1i> 一 体式 < /li> 
<1i> 柏 拉 图 式 < /1i> 
</ol> 
</ul> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

列表 的 嵌 套 可 以 有 多 种 形式 : 无 序列 表 中 嵌 套 有 序列 表 , 无 序列 表 中 恋 套 无 序列 表 , 有 
序列 表 中 嵌 套 无 序列 表 , 有 序列 表 中 典 套 有 序列 表 。 

在 嵌 套 列表 中 ,包含 其 他 标记 的 标记 称 之 为 父 标记 ,通常 被 符 套 的 标记 要 缩 进 ,这 样 容 
易 看 出 它们 与 父 标记 之 间 的 关系 。 

4 代码 模板 的 参考 答案 

【代码 11: <1i> 爱 情 的 定义 < /1i> 

【代码 2]: <ol> 


【代码 习 : <1i> 爱 情 的 分 类 < /1i> 
【代码 4]: < ol type="I "> 


434 实践 环节 


编写 一 个 网 页 ,具体 要 求 如 下 : 

。 网 页 中 有 个 二 h2 二 标题 :“ 调 查 问 卷 ”; 

。 网 页 中 有 3 个 有 序列 表 , 其 中 两 个 有 序列 表 赃 套 在 男 一 有 序列 表 中 ; 
。 最 外 层 的 有 序列 表 的 项 目 序号 为 *1、2、3、4*…”; 

。 被 嵌 套 的 两 个 有 序列 表 的 项 目 序 号 为 "ABC.D…”; 

。 网 页 运行 效果 如 图 4.5 所 示 。 
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调查 问卷 


1. 选择 您 所 在 的 国家 
A_ 中 国 


图 4.5 4.3 实 践 环节 .html 运 行 效果 


4.4 小 结 


ul 标记 用 于 设置 无 序列 表 , 无 序列 表 的 项 目 符号 默认 是 ”。”, 但 通过 type 属性 值 可 以 
改变 无 序列 表 的 项 目 符号 。 当 type 属性 值 为 disc 时 ,项 目 符号 为 *。”; 当 type 属性 值 为 
circle 时 ,项 目 符号 为 *。”; 当 type 属性 值 为 square 时 ,项 目 符号 为 "。”。 

ol 标记 用 于 设置 有 序列 表 , 有 序列 表 的 项 目 序 号 默认 是 阿拉 伯 数 字 , 但 通过 type 属性 
值 可 以 改变 有 序列 表 的 项 目 序 号 。 当 type 属性 值 为 1 时 ,项 目 序号 为 "1、2、3、4…”; 当 
type 属性 值 为 a 时 ,项 目 序号 为 “a、b、c、d…”; 当 type 属性 值 为 A 时 ,项 目 序号 为 “A、B、C、 
D…”; 当 type 属性 值 为 1 时 ,项 目 序号 为 ”i ii ii ivy…”; 当 type 属性 值 为 上 时 ,项 目 序号 
为 

列表 可 以 任意 地 嵌 套 : 无 序列 表 中 贬 套 有 序列 表 , 无 序列 表 中 榜 套 无 序列 表 , 有 序列 表 
中 嵌 套 无 序列 表 ,. 有 序列 表 中 嵌 套 有 序列 表 。 


习 题 4 


1. 下 列 对 于 清单 的 说 法 错误 的 是 ( )。 
A. 常用 的 列表 有 3 种 格式 , 即 无 序列 表 (unordered List) ,有 序列 表 (ordered list) 和 
定义 列表 (definition list) 
B. 无 序列 表 用 二 ul 二 开始 
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C. 无 序列 表 输 出 时 ,每 一 条 目前 都 只 能 有 一 个 黑色 圆 点 

D. 各 种 列表 可 以 相互 谋 套 

. 编写 一 个 网 页 ,具体 要 求 如 下 : 

。 网 页 中 有 个 过 h2 之 标题 :“ 个 人 餐饮 调查 问卷 ”; 

网 页 中 有 个 有 序列 表 , 该 有 序列 表 有 2 个 列表 项 目 , 分 别 是 “你 喜欢 的 海鲜 类 菜 
谱 : ”和 * 你 喜欢 的 饮料 类 : ”, 列 表 项 目 序 号 为 “1 、2、3、4…”; 

“你 喜欢 的 海鲜 类 菜谱 : ”列表 项 目 中 嵌 套 一 个 无 序列 表 ,该 无 序列 表 的 项 目 符号 
为 “=”， 

“你 喜欢 的 饮料 类 : “列表 项 目 中 嵌 套 一 个 无 序列 表 , 该 无 序列 表 的 项 目 符号 为 


网 页 运行 效果 如 图 4.6 所 示 。 


“oo 


5 |http://localhost:8080/ch4/ 习 题 4-2. htnl 间 | 加 


个 人 和 餐饮 调查 问卷 
1 你 可 区 的 光 引 尖 末 


a 麻将 茶 鲍 

2. 你 喜欢 的 饮料 类 ， 
。 碳酸 饮料 
。 蔬菜 入 饮料 
。 果 汗 ( 疾 ) 钦 料 
。 合 和 乳 饮料 


图 4.6 习题 4-2. html 运行 效果 


图 像 和 多 媒体 在 一 个 网 页 中 起 到 美化 的 作用 ,有 了 图 像 和 多 媒体 后 ,网 页 不 再 是 单调 的 
文字 。 本 章 主 要 介绍 在 网 页 中 如 何 使 用 图 像 、 多 媒体 (如 动画 、 声 音 以 及 视频 ) 以 及 添加 背景 


音乐 。 


5.1 在 网 页 中 使 用 图 像 


互 1.1 核心 知识 


在 网 页 中 使 用 图 像 可 以 使 网 页 生动 ,内 容 更 加 清晰 ,起 到 美化 网 页 的 作用 。 但 是 ,图 
像 过 多 会 造成 网 页 图 像 下 载 时 间 过 长 ,会 使 浏览 者 失去 耐心 。 一 般 情 况 下 ,要 用 最 少 的 
字 节 数 生成 高 质量 的 图 像 。 网 页 中 常用 的 图 像 格 式 有 JPEG、GIF、BMP、PCX、TIFF 和 
PNG 等 。 

1. 标 记 img 

在 网 页 中 使 用 图 像 时 ,需要 使 用 img 标记 插入 图 像 。img 标记 有 很 多 属性 ,其 中 src 属 
性 是 必需 的 , 它 指定 要 插入 图 像 文件 的 位 置 与 名 称 , 语 法 格式 如 下 : 


<img src= "图像 文件 的 路 径 及 名 称 "> 
其 中 ,图 像 文件 的 路 径 可 以 是 相对 路 径 , 也 可 以 是 绝对 路 径 。 


2 img 标记 的 相关 属性 

1) alt 属性 

alt 属性 用 于 设置 提示 文字 ,提示 文字 会 在 图 像 无 法 显示 时 替代 图 像 在 浏览 器 中 显示 ， 
语法 格式 如 下 : 


<img src= "图 像 文 件 的 路 径 及 名 称 " alt= "提示 文字 内 容 "> 
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50) 


其 中 ,提示 文字 内 容 只 要 是 浏览 器 能 识别 的 文字 就 可 以 。 

2) height 与 width 属性 

默认 情况 下 ,网 页 中 图 像 的 显示 大 小 就 是 图 像 的 宽度 和 高 度 ,但 可 以 使 用 height 和 
width 属性 任意 设置 图 像 显示 的 高 度 和 宽度 ,语法 格式 如 下 : 

<img src= "图 像 文 件 的 路 径 及 名 称 " width= "图像 的 宽度 " height= "图 像 的 高 度 "> 
其 中 ,图 像 高 度 和 宽度 的 单位 是 像素 。 

3) border 属性 

默认 情况 下 ,网 页 中 的 图 像 是 没有 边框 的 ,如 果 要 设置 图 像 的 边框 可 以 使 用 border 属 
性 。 语 法 格式 如 下 : 

<img src= "图 像 文件 的 路 径 及 名 称 " border= "图 像 边框 的 宽度 "> 
在 上 述 语法 中 ,边框 的 单位 是 像素 ,宽度 值 越 大 边框 越 宽 。 

4) hspace 与 vspace 属性 

网 页 中 图 像 与 文字 之 间 的 水 平 距离 可 以 通过 hspace 属性 设置 ,垂直 距离 可 以 通过 
vspace 属性 设置 。 语 法 格式 如 下 : 

<img src= "图 像 文 件 的 路 径 及 名 称 " hspace= "水 平 间距 " vspace = "垂直 间距 "> 
其 中 ,水 平 间距 与 垂直 间距 的 单位 是 像素 。 

5) align 属性 

可 以 使 用 align 属性 设置 图 像 的 对 齐 方式 ,语法 格式 如 下 : 


<img src=" 图 像 文件 的 路 径 及 名 称 " align = "对 齐 方式 "> 
其 中 ,align 属性 值 常用 的 有 3 种 : middle( 居 中 ) \left( 居 左 ) right( 居 右 ) 。 


互 1 能 力 目标 


能 使 用 img 标记 在 网 页 中 添加 图 像 ,并 且 能 使 用 img 标记 的 各 种 属性 设置 图 像 在 网 页 
中 对 应 的 属性 值 。 


互 13 ”任务 驱动 


1. 任 务 的 主要 内 容 
写 一 个 网 页 (运行 效果 如 图 5. 1 所 示 ) ,具体 要 求 如 下 : 
。 网 页 中 有 个 二 h2 志 标题:“ 雄 猫 战 斗 机 ”; 
。 标题 的 下 面 有 张 战斗 机 图 片 plane. jpg; 图 片 文件 和 网 页 文件 在 同一 目录 中 ; 
。 图 像 的 宽度 为 500, 图 像 的 高 度 为 400; 
。 图像 的 边框 宽度 为 2; 
。 图 像 的 提示 文字 设置 为 :“ 俺 是 美国 的 高 级 战斗 机 ”。 
2 任务 的 代码 模板 
将 下 列 example5_1. html 中 的 [代码 ] 替 换 为 HTML 代码 。 


|http://localhost:8080/ch5/exanple5_1. htal 加 加 


雄 猫 战斗 机 


是 美国 F-14 舰 载 战 斗 机 。 


图 5.1 example5_1. html 运行 效果 


examples_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0rg/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example5 1.html< /title> 
</head> 
<body> 
<center> 
<h2> 雄 猫 战斗 机 < /h2> 
雄 猫 战斗 机 <【 代 码 1]src= "plane.jpg"【 代 码 2]="500"【 代 码 3]="400"【 代 码 4]="2" 
【代码 9]=" 俺 是 美国 的 高 级 战斗 机 "> 是 美国 F- 14 舰 载 战斗 机 。 
<! 一 代码 1 使 用 img 插 和 图片 ,代码 2 设置 图 片 的 宽度 ,代码 3 设置 图 片 的 高 度 ,代码 4 设置 图 片 的 
边框 ,代码 5 设置 图 片 的 提示 文字 一 > 


</center> 

< /body> 

</html> 

3. 任务 小 结 或 知识 扩展 


一 般 情况 下 ,通过 程序 把 图 像 的 尺寸 放大 会 产生 马赛 克 效果 ,显得 粗糙 ,而 缩小 就 不 会 


有 这 样 的 问题 。 如 果 图 像 尺寸 确实 太 小 ,那么 最 好 使 用 图 像 处 理 软 件 ( 如 Photoshop CS) 重 
新 生成 一 张 尺寸 合适 的 图 像 ,然后 再 插入 到 网 页 中 。 
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4 代码 模板 的 参考 答案 


【代码 1 : img 
【代码 3 : width 
【代码 习 : height 
【代码 4]: border 
【代码 5]: alt 


S14 实践 环节 


编写 一 个 网 页 ,具体 要 求 如 下 : 

。 网 页 中 有 个 二 h3 二 标题 :“ 漂 亮 的 星海 湾 ”; 

。 标 题 的 下 面 有 张 风景 图 片 xinghaiwan. jpg, 图 片 文件 和 网 页 文件 在 同一 目录 中 ; 
。 图 像 的 宽度 为 200, 图 像 的 高 度 为 200; 

。 图 像 与 文字 的 水 平 间距 为 20, 垂 直 间 距 也 为 20; 

。 图 像 的 对 齐 方式 为 居中 ， 

。 网 页 运行 效果 如 图 5. 2 所 示 。 


[国光 etp://1ocuhost:8080/ch5/5.1 实 践 环节 . htnl 


漂亮 的 星海 湾 


星海 洁 是 中 国 辽宁 大 连 的 一 道 独 特 的 风景 线 。 


图 5.2 5.1 实 践 环节 . html 运行 效果 


5.2 添加 网 页 背景 音乐 


Se1 核心 知识 
给 网 页 添加 背景 音乐 ,可 以 使 浏览 者 在 进入 网 站 的 同时 能 听 到 优美 的 音乐 ,也 可 以 大 大 

增强 网 站 的 娱乐 效果 。 使 用 bgsound 标记 给 网 页 添加 背景 音乐 ,语法 格式 如 下 : 

<bgsound src= "音乐 文件 的 路 径 及 名 称 " loop= "播放 次 数 "> 


其 中 ,音乐 文件 的 格式 可 以 是 AVI.MP3 以 及 MID 等 类 型 的 声音 文件 。 如 果 希 望 背景 音乐 
无 限 次 地 循环 播放 ,那么 loop 的 值 设 置 为 true。 


See 能 力 目标 
能 使 用 bgsound 标记 给 网 页 添加 背景 音乐 ,以 增强 网 页 的 娱乐 效果 。 


S23 任务 驱动 


1. 任 务 的 主要 内 容 
一 个 网 页 (运行 效果 如 图 5. 3 所 示 ) ,网 页 中 有 个 二 hl 之 标题 :“ 边 听 着 优美 的 歌 
声 , 边 看 着 紧张 的 叙利亚 新 闻 ”, 还 有 个 二 h2 二 标题 :“ 叙 利 亚 误 责 联合 国人 权 理 事 会 决议 不 
公 ”。 网 页 有 背景 音乐 ,背景 音乐 文件 (传奇 . mp3) 与 网 页 的 程序 文件 在 同一 个 目录 中 ,背景 
音乐 循环 播放 两 次 结束 。 


S$ [htp://localhost:0080/chS/exanple5 2 htnl Ee 


边 听 着 优美 的 歌声 ， 边 看 着 紧张 的 叙利亚 新 闻 


叙利亚 访 责 联合 国人 权 理 事 会 决议 不 公 


新 华 网 大 马 士 革 12 月 3 日 电 ( 记 者 李 震 ) 舍利 亚 外 交 部 3 日 强烈 谴责 联合 国 人 权 理 事 会 日 前 通 
过 的 决议 不 公正 ， 强 调 该 决议 完全 是 基于 敌对 势力 的 造 讶 炉 动 和 虚假 信息 。 


官方 的 叙利亚 通讯 社 当天 援引 外 交 部 的 一 份 声明 说 ， 联 合 人 权 理 事 会 的 决议 索 是 “和 疮 人 听闻 和 
不 公正 的 "， 是 叙利亚 敌对 势力 早 有 预谋 的 ， 目 的 就 是 要 让 叙利亚 问题 政治 化 。 


ptt) 决议 是 根据 叙利亚 境外 敌对 势力 和 不 诚实 的 媒体 机 构 散 布 的 “ 造谣 煽动 和 不 实 信 
直 积 极致 力 于 维护 国家 的 安全 与 稳定 ， 保 护 人 民 的 利益 ， 努 力 推动 改革 ， 决 议 


息 "。 
i 内 政 。 

联合 国人 权 理 事 会 2 日 在 日 内 瓦 召开 裔 利 亚 问题 特别 会 议 ， 以 37 票 赞成 ，4 标 反对， 6 票 齐 权 通 
过 了 一 项 由 欧盟 提出 有 关 倒 利 亚 人 权 形势 的 决议 。 

决议 对 叙利亚 问题 独立 国际 调查 委员 会 提交 的 调查 报告 表示 欢迎 ， 强 烈 谴责 叙利亚 政府 “大 规 
区 人 人 自由 的 行为 ” 敦促 叙利亚 政府 停止 一 切 侵犯 人 权 做 法 ， 释放 被 捕 人 士 ， 


间 遂 


图 5.3 example5_2. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example5_2. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 
examples_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> example5 2.html< /title> 
</head> 
<body> 
<hl align= "center"> 边 听 着 优美 的 歌声 , 边 看 着 紧张 的 叙利亚 新 闻 < /hl> 
<h2 align= "center"> 叙 利 亚 谴责 联合 国人 权 理 事 会 决议 不 公 < /h2> 
<! 一 代码 1 使 用 bgsouna 插 入 背景 音乐 ,代码 2 使 用 loop 设置 背景 音乐 播放 的 次 数 -- > 
<【 代 码 1]- "传奇 .mp3"〖 代 码 2]> 
<p> 
新 华 网 大 马 士 革 12 月 3 日 电 (记者 李 震 ) 叙 利 亚 外 交 部 3 日 强烈 谴责 联合 国人 权 理 事 会 日 
前 通过 的 决议 不 公正 ,强调 该 决议 完全 是 基于 敌对 势力 的 造谣 煽动 和 虚假 信息 。 


<p> 
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官方 的 叙利亚 通讯 社 当 天 援引 外 交 部 的 一 份 声 明说 ,联合 人 权 理 事 会 的 决议 案 是 “ 答 人 听闻 
和 不 公正 的 ”, 是 令 利 亚 敌 对 势力 早 有 预谋 的 ,目的 就 是 要 让 叙利亚 问题 政治 化 。 
<p> 
声明 强调 ,决议 是 根据 叙利亚 境外 敌对 势力 和 不 诚实 的 媒体 机 构 散 布 的 “造谣 煽动 和 不 实 信 
息 ”。 叙利亚 政府 一 直 积 极致 力 于 维护 国家 的 安全 与 稳定 ,保护 人 民 的 利益 ,努力 推动 改革 ， 
决议 粗暴 干涉 了 叙利亚 的 内 政 。 
<p> 
联合 国人 权 理 事 会 2 日 在 日 内 瓦 召开 叙利亚 问题 特别 会 议 ,以 37 票 赞成 ,4 票 反 对 ,6 票 弃 
权 通 过 了 一 项 由 欧盟 提出 有 关 和 叙利亚 人 权 形 势 的 决议 。 
<p> 
决议 对 叙利亚 问题 独立 国际 调查 委员 会 提交 的 调查 报告 表示 欢迎 ;强烈 谴责 叙利亚 政府 
“大 规模 \ 有 组 织 侵犯 人 权 和 基本 自由 的 行为 *; 敦 促 令 利 亚 政府 停止 一 切 侵犯 人 权 做 法 , 释 
放 被 捕 人 士 ,接受 国际 监督 。 
</body> 
</html> 


3. 任 务 小 结 或 知识 扩展 
有 的 浏览 者 喜欢 背景 音乐 ,有 的 浏览 者 不 喜欢 背景 音乐 。 对 于 bgsound 标记 添加 的 背 
景 音乐 ,浏览 者 是 无 法 控制 的 。 因 此 ,在 给 网 页 添加 背景 音乐 时 ,要 慎重 。 


4. 代码 模板 的 参考 答案 


【代码 1】: bgsound src 
【代码 2】: loop="2" 


S24 实践 环节 
编写 一 个 网 页 (运行 效果 如 图 5. 4 所 示 ) ,具体 要 求 如 下 : 


http:7/iocalhost;80601ch5/5.2 实 路 环节 .htal 间 PP 


图 5.4 5.2 实 践 环节 . html 运行 效果 
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网 页 中 有 个 二 h2> 标 题 :“ 此 网 页 既 有 背景 图 片 ,又 有 背景 音乐 ”; 
背景 图 片 文件 (plane. jpg) 和 背景 音乐 文件 (传奇 . mp3) 与 网 页 的 程序 文件 在 同一 个 
目录 中 ; 

背景 音乐 无 限制 地 循环 播放 。 


5.3 在 网 页 中 使 用 多 媒体 


531 核心 知识 
如 何 使 单调 的 网 页 变 得 生动 呢 ? 那 可 能 离 不 开 音 频 或 视频 文件 。 浏 览 者 要 想 正确 地 浏 
览 这 些 被 添加 视频 文件 的 网 页 ,必须 在 自己 的 计算 机 上 安装 相应 的 播放 软件 。 


1. 多 媒体 文件 标记 embed 
在 网 页 中 可 以 使 用 标记 embed 将 多 媒体 文件 (如 Flash 动画 、MP3 音乐 .ASF 视频 等 ) 
添加 到 网 页 中 ,语法 格式 如 下 : 


<embed src=" 多 媒体 文件 的 路 径 及 名 称 " width= "播放 器 的 宽度 " height= "播放 器 的 高 度 "> 
</ embed> 


其 中 ,多 媒体 文件 的 路 径 可 以 是 相对 路 径 , 也 可 以 是 绝对 路 径 。 播 放 器 的 宽度 和 高 度 一 定 要 
设置 ,否则 无 法 显示 播放 多 媒体 文件 的 软件 。 

2 使 用 autostart 属性 设置 自动 运行 

使 用 autostart 属性 设置 多 媒体 文件 自动 运行 ,语法 格式 如 下 : 


<embed src=" 多 媒体 文件 的 路 径 及 名 称 " width=" 播 放 器 的 宽度 " height=" 播 放 器 的 高 度 " 
autostart= "是 否 自动 运行 ">< /erbed> 


其 中 ,autostart 的 取 值 有 两 个 ,一 个 是 false, 表 示 不 自动 播放 多 媒体 文件 ;一 个 是 true, 表 示 
自动 播放 多 媒体 文件 。 


3. 使 用 loop 属 性 设置 循环 播放 


<embed src= "多 媒体 文件 的 路 径 及 名 称 " width= "播放 器 的 宽度 " height= "播放 器 的 高 度 " 
locp= "是 否 循 环 播放 ">< /embed> 


其 中 ,loop 的 取 值 有 两 个 ,一 个 是 false, 表 示 只 播放 一 次 多 媒体 文件 ;一 个 是 true, 表 示 无 限 
制 地 重复 播放 多 媒体 文件 。 


4 使 用 hidden 属 性 设置 播放 器 的 隐藏 


<enbed src= "多 媒体 文件 的 路 径 及 名 称 " width= "播放 器 的 宽度 " height= "播放 器 的 高 度 " hidden=" 
是 否 显示 播放 器 "> < /embed> 


其 中 ,hidden 的 取 值 有 两 个 ,一 个 是 false, 表 示 显 示 播 放 器 ;一 个 是 true, 表 示 隐 藏 播放 器 。 
Se2 能力 目标 
能 使 用 embed 标记 给 网 页 添加 各 种 多 媒体 文件 (如 Flash 动画 、MP3 音乐 .ASF 视频 


人 SLCSS 同 页 设计 教学 做 一 体 化 教程 


等 ) ,使 网 页 效果 更 加 生动 。 
S33 任务 驱动 


1. 任 务 的 主要 内 容 

编写 一 个 网 页 (运行 效果 如 图 5. 5 所 示 ) ,具体 要 求 如 下 : 

。 网 页 中 有 个 二 h2 二 标题 :“ 我 们 毕业 了 ”; 

。 网 页 中 有 3 段 文字 ,3 段 文字 之 后 有 个 Flash 动画 (我 们 毕业 了 . swf); 
Flash 动画 文件 和 网 页 程序 文件 在 同一 个 目录 中 ; 

。 Flash 动画 播放 器 的 高 度 和 宽度 都 是 500; 

Flash 动画 文件 不 自动 播放 。 


faite) 国 ErrLS5css 网 ki/ 第 5 章 在 隐 页 中 使 用 图 像 和 多 媒体 /example5_3html 同 回 站 


我 们 毕业 了 
今天 ， 我 们 毕业 了 ， 从 此 ， 我 们 告别 了 一 段 纯真 的 青春 一段 年 少 轻狂 的 岁月 ， 一 个 充 消 幻想 的 时 


毕业 前 的 这 些 日 子 ， 时 间 过 得 好 像 流沙 ， 看 起 来 漫长 ， 却 无 时 无 刻 不 在 逝去 想 挽留 ， 有 限 
的 时装 卸 全 反问 多 估 注 十 ; 毕业 管 辩 ， 散 伙 席 颖 ， 举 手 话 别 ， 各 奔 东西 … 和 一 切 又 走 


这 儿 大 ， 我 们 都 会 月 划 亡 蕊 地 再 竹 竹 校园 ， 看 一 看 它 今 大 的 样 半 ， 想 一 想 五 牛 前 它 如 何 迎 来 稚气 未 说 
的 我 们 。 走 了 五 年 ， 似 乎 又 走 回 了 起 点 。 突 然 觉得 ， 五 年 的 同窗 、 身 边 的 朋友 ， 比 想象 中 要 和 善 、 可 爱 得 
多 | 星光 下 的 夜晚 ， 每 一 个 都 温柔 如 风 。 


5.5 example5_3. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example5_3. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 
examples_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>example5 3.html< /title> 

< /head> 

<body> 
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CE 
<h2 align= "center"> 我 们 毕业 了 < /h2> ue 
<p> 

今天 ,我 们 毕业 了 ,从 此 ,我 们 告别 了 一 段 纯 真 的 青春 ,一 段 年 少 轻狂 的 岁月 ,一 个 充满 幻想 
的 时 代 .……- 
<p> 


毕业 前 的 这 些 日 子 ,时 间 过 得 好 像 流沙 ,看 起 来 漫长 , 却 无 时 无 刻 不 在 逝去 ; 想 挽留 ,一 伸手 ， 
有 限 的 时 光 却 在 指 间 悄然 汶 走 ,毕业 答辩 , 散 伙 席 妖 , 举 手 话 别 ,各 奔 东 西 …… 一 切 似 乎 都 预 
想 的 到 ,一 切 又 走 得 太 过 无 奈 。 

<p> 
这 几 天 ,我 们 都 会 有 意 无 意 地 再 逛 逛 校园 ,看 一 看 它 今天 的 样子 , 想 一 想 五 年 前 它 如 何 迎 来 
稚气 未 脱 的 我 们 。 走 了 五 年 ,似乎 又 走 回 了 起 点 。 突 然 觉得 ,五 年 的 同窗 、 身 边 的 朋友 , 比 想 
象 中 要 和 善 ` 可 爱 得 多 ! 星 光 下 的 夜晚 ,每 一 个 都 温柔 如 风 。 


<br> 
<center> 
<!-- 代 码 1 使 用 embed 插入 Flash 动 画 , 代 码 2 使 用 autostart 设置 不 自动 播放 --> 
< 代码 了 = "我 们 毕业 了 .swf" width= "500" height= "500"【 代 码 2]>< /embed> 
</center> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

多 媒体 固然 能 使 网 页 产生 美好 的 效果 ,但 是 使 用 多 媒体 时 ,要 
媒体 播放 软件 。 

4 代码 模板 的 参考 答案 


: 意 浏览 器 是 否 集成 了 多 


【代码 1]: embed src 
【代码 3]: autostart= "false" 


534 实践 环节 


图 各 [http://1ocalhost:8080/ch5/5.3 实 路 环节 .htnl WP 


请 您 欣赏 音乐 


TF 
QOWOOOO 


图 5.6 5.3 实 践 环节 . html 运行 效果 
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网 页 中 使 用 多 媒体 文件 ( 醉 清风 . mp3) ; 

MP3 文件 和 网 页 程序 文件 在 同一 个 目录 中 ; 
MP3 播放 器 的 高 度 和 宽度 都 是 200; 

MP3 播放 器 打开 网 页 时 ,自动 播放 MP3 文件 ; 
MP3 播放 器 不 停 地 循环 播放 MP3 文件 。 


5.4 小 结 


使 用 img 标记 可 以 在 网 页 中 插入 图 像 将 网 页 变 得 生动 美观 ,但 大 量 的 图 像 会 影响 网 页 
的 运行 速度 。 因 此 ,应 先 用 最 小 的 字 节 数 生成 高 质量 的 图 像 . 然 后 再 插入 到 网 页 中 。 

使 用 bgsound 标记 可 以 给 网 页 添加 背景 音乐 ,但 有 的 网 页 浏览 者 并 不 希望 听 到 背景 音 
乐 , 自 己 还 没有 办 法 把 背景 音乐 去 掉 。 因 此 ,网 页 制作 者 要 慎重 添加 背景 音乐 。 

使 用 embed 标记 可 以 将 多 媒体 文件 (如 Flash 动画 、MP3 音乐 .ASF 视频 等 ) 添 加 到 网 
页 中 ,浏览 者 要 想 正 确 地 浏览 这 些 被 添加 多 媒体 文件 的 网 页 ,必须 在 自己 的 计算 机 上 安装 相 
应 的 播放 软件 。 


习 题 5 


1. 常用 的 网 页 图 像 格 式 有 ( ) 和 ( ss 
A. gif,tiff B. tiff,jpg C. gif,jpg D. jpeg,png 
2. 有 关 网 页 中 图 像 的 说 法 不 正确 的 是 ( Ys 
A. 网 页 中 的 图 像 并 不 与 网 页 保存 在 同一 个 文件 中 ,每 个 图 像 单独 保存 
B. HTML 语言 可 以 描述 图 像 的 位 置 、 大 小 等 属性 
C. HTML 语言 可 以 直接 描述 图 像 上 的 像素 
D. 图 像 可 以 作为 超 链接 的 起 始 对 象 
3. 在 网 页 中 若 要 播放 名 为 demo. avi 的 动画 ,以 下 选项 中 正确 的 是 ( )s 
A. =Embed src="demo. avi" autostart=true> 
B. =Embed src="demo. avi" autoopen=true> 
C. <Embed src="demo. avi" autoopen=true><=/Embed> 
D. =Embed src="demo. avi" autostart=true><=/Embed> 
4. 车 要 循环 播放 背景 音乐 bg. mid, 以 下 选项 中 正确 的 是 ( 和 
A. 二 bgsound src 一 "bg. mid" Loop="1"> 
B. 一 bgsound src 一 "bg. mid" Loop="True"> 
C. 二 sound src 一 "bg. mid" Loop="True"> 
D. =Embed src 一 "bg. mid" autostart= "true"></Embed> 
5. 下 列 关 于 插入 图 片 说 法 错误 的 是 ( Ds 
A. 二 img 二 标记 是 用 来 处 理 图 像 输出 的 
B.“src” 属 性 指明 了 所 要 链接 图 像 的 文件 地 址 ,这 个 图 形 文 件 必须 是 本 地 计算 机 上 
的 图 形 
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{ls9 
C.“width 一 # 、height 一 上 # ”属性 用 来 设 定 图 片 大 小 ed 
D.“hspace 一 井 、vspace 一 井 ”属性 用 来 设 定 图 片 边沿 空白 ,以 免 文 字 或 其 他 图 片 

贴近 
6. 编写 一 个 网 页 (运行 效果 如 图 5.7 所 示 ) ,网 页 中 有 个 二 h2 之 标题 :“ 请 您 慢 慢 欣 
赏 ”。 标 题 的 下 面 有 张 图 片 cat. jpg, 图 片 文件 和 网 页 程序 在 同一 目录 中 。 图 像 的 宽度 为 
100 ,图 像 的 高 度 为 100 ,图像 的 边框 宽度 为 1, 图 像 的 提示 文字 设置 为 :“ 作 是 来 搞笑 的 。.” 网 
页 中 使 用 多 媒体 文件 (传奇 . mp3),MP3 文件 和 网 页 程序 文件 在 同一 个 目录 中 。MP3 播放 
器 的 高 度 和 宽度 都 是 100,MP3 播放 器 打开 网 页 时 ,自动 播放 MP3 文件 ,MP3 播放 器 不 停 
地 循环 播放 MP3 文件 。 


知 习题 5-6.htl Lal 


请 您 慢 慢 欣赏 


使 是 来 搞笑 的 
图 5.7 习题 5-6. html 运行 效果 


网 站 中 的 一 个 个 网 页 可 以 通过 超 链接 关联 在 一 起 。 因 此 , 超 链接 是 一 个 网 站 的 灵魂 ,是 
网 页 中 最 重要 的 元 素 之 一 。 本 章 将 介绍 基本 超 链接 、 锚 点 链接 、 外 部 网 站 链接 以 及 E-mail 
链接 等 。 


6.1 在 网 页 中 使 用 基本 超 链接 


EE1.1 核心 知识 
超 链接 的 作用 是 建立 从 一 个 位 置 到 另 一 个 位 置 的 链接 。 利 用 超 链接 不 仅 可 以 进行 网 页 
间 的 相互 访问 ,还 可 以 使 网 页 链接 到 其 他 相关 的 多 媒体 文件 上 。 
1. 超 链接 标记 <a> 
超 链 接 标记 过 a 是 一 个 非常 重要 的 标记 , 它 可 以 成 对 出 现在 文档 的 任何 位 置 ,语法 格 
式 如 下 : 
<a href= "链接 路 径 "> 链 接 内 容 < /a> 
其 中 ,“ 链 接 内 容 ” 可 以 是 文字 内 容 , 也 可 以 是 一 张 图 片 。 
2 使 用 target 属性 设置 超 链接 的 目标 窗口 
默认 情况 下 , 超 链 接 的 目标 网 页 在 当前 页 面 中 打开 (关闭 当前 页 面 窗口 ), 但 可 以 使 用 
target 属性 控制 被 打开 的 目标 窗口 ,语法 格式 如 下 : 
<a href= "链接 路 径 " target= "目标 窗口 的 打开 方式 "> 链接 内 容 < /a> 
其 中 ,target 属性 值 可 以 为 _self、blank、top 以 及 _parent，self 是 target 的 默认 值 。 如 果 
target 的 值 为 _blank, 那 么 目标 页 面 会 在 一 个 新 的 空白 窗口 中 打开 。 如 果 target 的 值 
为 _ top, 那么 目标 页 面 会 在 顶层 框架 中 打开 。 如 果 target 的 值 为 _parent, 那 么 目标 页 面 会 在 当 
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前 框架 的 上 一 层 打 开 。 框 架 的 概念 将 在 第 9 章 介绍 。 


E12 能 力 目标 


面 的 打开 方式 。 


要 求 读者 能 使 用 超 链 接 标记 二 a 二 创建 链接 ,并 且 会 使 用 target 属性 设置 超 链接 目标 页 


E13 任务 驱动 


1. 任 务 的 主要 内 容 

编写 两 个 网 页 example6_1. html 与 example6_2. html, 具 体 要 求 如 下 : 

。 在 example6_1. html 页 面 中 有 个 二 h2 二 标题 “学 习 超 链接 ”。 

在 标题 学习 超 链 接 ” 下 面 有 段 文 字 人 与 动物 和 谐 相处 , 想 了 解 我 们 ,请 点 击 图 片 ， 
谢谢 1”, 在 该 段 文字 后 面 有 个 超 链 接 , 超 链接 的 内 容 为 一 张 图 片 cat_bao. jpg (图片 
与 example6_1. html 页 面 在 同一 个 目录 下 ) ,链接 路 径 为 “example6_2. html”。 

在 example6_2. html 页 面 中 有 个 二 h2 二 标题 “金钱 豹 ”。 

在 标题 “金钱 豹 " 下 面 有 段 文字 “金钱豹 ,又 称 豹 、 银 豹子 .豹子 , 文 豹 。 体 态 似 虎 , 身 
长 1 米 以 上 ,体重 50 千克 左右 。 头 圆 . 耳 小 。 全 身 棕 黄 而 遍布 黑 褐色 金钱 花 斑 , 故 
名 。 还 有 一 种 黑 化 型 个 体 ,通体 暗黑 色 , 细 观 仍 见 圆 形 斑 , 常 被 称 为 墨 豹 。 金 钱 豹 是 
一 种 大 型 食 兽 , 身 体 强 健 ,行动 敏捷 ,能 跳 善 候 , 性 情 凶 猛 狐 独 甚 至 能 猫 食 鹿 等 大 型 
动物 ,偷袭 食 草 动物 。 金 钱 豹 的 仆 树 本 领 非常 高 ”。 

网 页 运行 效果 如 图 6. 1(a)、(b) 所 示 。 


> 国 加 http://localhost:8080/chB/exanpleB_1. htnl 


学 习 超 链 接 


人 与 动物 和 谐 相 处 ， 想 了 解 我 们 ， 请 点 击 图片 ， 谢 谢 ! 


(a) example6_1.html 运 行 效果 
古本 [http://localhost:6080/chB/exanple6_2. html 3 


金钱 鹏 


金钱 豚 ， 又 称 的 、 银 豹子 、 鹏 子 、 文 鹏 。 体 态 似 虎 ， 身 长 1 米 以 
0 头 圆 、 耳 小 。 全 身 棕 黄 而 遍布 黑 褐色 金钱 花 
。 还 有 一 种 黑 化 型 个 体 ， 通 体 暗 黑色 ， 细 观 仍 见 圆 形 斑 ， 常 
i 金钱 鹏 是 一 种 大 型 食 兽 ， 身 体 强 健 ， 行 动人 敏捷 ， 能 跳 善 
疏 ， 性 情 闻 兄 狄 猎 甚 至 能 猎 食 庆 等 大 型 动物 ， 入 美食 章 动物 全 钱 的 
的 有 阳 树 本 领 非常 高 。 


(b) example6_2.html 运 行 效果 
图 6.1 
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2 任务 的 代码 模板 
将 下 列 example6_1. html 中 的 [代码 替换 为 HTML 代码 。 
example6_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example6 1.html< /title> 
< /head> 
<body> 
<h2 align= "center"> 学 习 超 链接 < /h2> 
<!-- 代 码 1 使 用 标记 a 建立 链接 ,目标 页 面 为 example6 2.html --> 
<p> 人 与 动物 和 谐 相处 , 想 了 解 我 们 ,请 点 击 图 片 ,谢谢 下 代码 1]< img src="cat_bao.jpg" width 
="100" height= "100" alt= "我 们 可 爱 吗 ?">< /a>< /p> 
< /body> 
</html> 


example6_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> example6 2.html< /title> 
< /head> 
<body> 
<h2 align= "center"> 学 习 超 链接 < /h2> 
<p> 人 与 动物 和 谐 相 处 , 想 了 解 我 们 ,请 点 击 图 片 ,谢谢 !<a href- "example6 2.html"> 
< img src="cat_bao.jpg" width= "100" height= "100" alt= "我 们 可 爱 吗 ?"> < /a> 


</p> 
< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 


链接 路 径 可 以 分 为 相对 路 径 和 绝对 路 径 。 绝 对 路 径 是 完全 路 径 , 也 就 是 说 不 管 源 文件 
在 什么 位 置 ,都 可 以 找到 它 。 相 对 路 径 是 指 相对 当前 文件 的 简化 路 径 , 当 当前 文件 与 所 链接 
的 文档 处 于 同一 个 目录 内 时 ,相对 路 径 就 显得 特别 方便 。 

链接 路 径 使 用 相对 路 径 还 是 绝对 路 径 , 有 一 条 通用 的 规则 : 链接 目标 页 面 与 当前 页 面 
在 一 起 时 应 使 用 相对 路 径 ,链接 目标 页 面 在 其 他 地 方 ( 其 他 计算 机 、 硬 盘 或 网 站 ) 时 ,应 使 用 
绝对 路 径 。 


4 代码 模板 的 参考 答案 


【代码 1]: <a href= "example6 2.html"> 
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G14 实践 环节 


编写 两 个 网 页 (6. 1 实践 环节 _1. html,6. 1 实践 环节 _2. html) ,具体 要 求 如 下 : 

。 在 6.1 实践 环节 _1. html 中 有 个 二 h2 二 标题 :“ 个 人 简介 

。“ 个 人 简介 ”标题 的 下 面 有 4 段 文字 

。 在 6.1 实践 环节 _1. html 的 最 后 一 行 有 个 超 链接 (个 人 相册 ) ,链接 目标 页 面 为 6. 1 
实践 环节 _2. html, 目 标 页 面 在 新 的 窗口 中 打开 ; 

。 在 6.1 实践 环节 _2. html 中 使 用 img 标记 插入 3 张 图 片 , 图 片 与 网 页 文件 在 同一 个 

目录 中 ,图 片 宽度 都 是 352 ,图 片 高 度 都 是 470; 

。 网 页 中 用 到 的 文字 与 照片 出 自 网 站 http://baike. baidu. com/view/2101049. htm; 

。 6. 1 实践 环节 _1. html 运行 效果 如 图 6. 2(a) 所 示 ,6. 1 实践 环节 _2. html 运行 效果 如 
图 6.2(b) 所 示 。 


图 路 |http://1ocalhost:8080/ch5/6. 1 实践 环节 _1. html a 


个 人 简介 


顾 小 白 ， 自 2000 年 起 开始 欣 写 电影 随笔 及 评论 ， 曾 为 《看 电影 》、 《电影 世界 》、 《21 世 
纪 环 球 报道 》、 《< 信息 时 报 》、 《青年 时 报 》、 < 花溪 》、 《瑞丽 》、 新 浪 文化 频道 、 网 易 娱 
乐 频道 、tom 娱 乐 频 道 等 媒体 撰写 专栏 ， 参 抱 书 籍 包 括 《 家 卫 森 林 》、 《独立 精神 》、《 电 影 行 
走 》、 《后 窗 看 电影 》 等 。 


2003 年 出 版 个 人 随笔 集 < 失忆 谅解 备忘录 》 《现代 出 版 社 ) ，2005 年 5 月 最 新 推出 < 顾 小 白 
电影 随笔 -一 等 待 是 一 生 最 初 敬老》 〈 古 吴 轩 出 版 社 ) 。 


2000 征 完 记 二 让 要 电 扣 而 处 女 作 区 (和 因 故 未 拍 ) ，2006 年 完成 
电影 编剧 处 女 作 《< 红色 康 并 因 》 ( 茶 尚 君 导演 ) ， 访 片 获 第 十 二 届 荃 山 国 际 电 影 节 费 比 西国 际 
影评 人 奖 及 希腊 国际 电影 节 最 佳 影片 金 亚历山大 奖 。 


2008 年 参与 李少红 版 《红楼梦 》 的 编剧 ，2010 年 和 《 贱 人 》 的 作者 尹 丽 川 、《 轮 廊 回 暖 》 
的 作者 多 多 共同 参与 张艺谋 导演 的 新 戏 《 山 植树 之 恋 》 的 电影 多 | 作 。 


个 人 相册 


(a) 6.1 实 践 环节 _1.html 运 行 效果 


园 沾 [http://1ocalhost:8080/ chB/6 1 实践 环节 _2. htnl 


(b) 6.1 实 践 环节 _2.html 运 行 效果 
图 6.2 
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6.2 在 网 页 中 使 用 锚 点 链接 


E621 核心 知识 


浏览 网 页 的 时 候 ,如 果 网 页 的 内 容 比 较 多 会 导致 页 面 过 长 ,需要 不 断 地 拖拉 滚动 条 才能 
看 完 网 页 的 所 有 内 容 , 这 样 很 不 方便 。 如 何 避 免 这 样 的 情况 呢 ? 那 就 是 需要 在 网 页 中 使 用 
锚 点 链接 。 


1 锚 点 的 创建 
锚 点 与 链接 的 文字 可 以 在 同一 个 页 面 ,也 可 以 在 不 同 的 页 面 。 在 实现 锚 点 链接 之 前 ,需要 
先 创建 锚 点 ,通过 创建 的 锚 点 才能 对 页 面 的 内 容 进 行 引导 与 跳 转 。 创 建 锚 点 的 语法 格式 如 下 : 


<a name=" 锚 点 的 名 称 " >< /a> 


其 中 , 锚 点 的 名 称 可 以 是 数字 或 英文 字母 ,或 者 两 者 混合 。 在 同一 页 面 中 可 以 有 多 个 锚 点 ， 
但 名 称 不 能 相同 。 


2 在 同一 页 面 中 使 用 锚 点 
一 个 锚 点 创建 后 ,就 可 以 在 同一 页 面 内 使 用 锚 点 链接 了 ,使 用 锚 点 链接 的 语法 格式 如 下 : 


<a href= 哇 锚 点 的 名 称 " >< /a> 


其 中 ,“# ”后面 写 上 锚 点 的 名 称 后 ,就 可 以 链接 到 同一 个 页 面 中 由 该 锚 点 指定 的 位 置 了 ,这 
种 方式 只 是 在 同一 页 面 中 使 用 锚 点 。 


3. 在 不 同 页 面 中 使 用 锚 点 
在 不 同 页 面 中 使 用 锚 点 链接 ,具体 语法 格式 如 下 : 


<a href= "链接 路 径 # 锚 点 的 名 称 " >< /a> 


Eee 能 力 目标 
不 仅 能 够 在 同一 个 页 面 中 使 用 锚 点 链接 ,而 且 还 能 够 在 不 同 页 面 中 使 用 锚 点 链接 。 
Ee3 任务 驱动 


1. 任 务 的 主要 内 容 
编写 两 个 网 页 example6_3. html 与 example6_4. html, 具 体 要 求 如 下 : 

。 在 example6_3. html 页 面 中 有 4 个 超 链 接 : 狮子 、 人 类 、 斑 马 以 及 印度 鹏 ,它们 分 别 
链接 到 不 同 的 锚 点 。 其 中 ,狮子 链接 到 “Lion” 锚 点 “人 类 ?链接 到 “example6_4. 
html# Race” 锚 点 性 斑马? 链接 到 “Zebra” 锚 点 ,印度 鹏 ”链接 到 “example6_4. html 
井 Cheetah” 锚 点 。 

。 在 example6_3. html 页 面 中 定义 了 两 个 锚 点 : Lion 与 Zebra, 在 example6_4. html 
页 面 中 定义 了 两 个 锚 点 : Race 与 Cheetah 。 

。 在 example6_3. html 与 example6_4. html 页 面 中 使 用 到 的 图 片 与 两 个 页 面 同属 一 
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个 目录 。 
2 任务 的 代码 模板 


将 下 列 example6_3. html 与 example6_4. html 中 的 【代码 】 蔡 换 为 HTML 代码 。 
example6_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/loose.dtd"> 
<html> 
<head> 
<title> 人 与 动物 和 谐 相处 < /title> 
< /head> 
<body> 
<p><a【 代 码 1]> 狮 子 < /a> < ! 一 链接 到 Lion 锚 点 --> 
<br> 
<br> 
<a【 代 码 2]> 人 类 < /a> <!-- 链 接 到 example6 4.html#Race 锚 点 --> 
<br> 
<br> 
<a【 代 码 3]> 斑 马 </a> <!-- 链 接 到 zebra 锚 点 --> 
<br> 
<br> 
<a【 代 码 4]> 印 度 豹 </a> < !-- 链 接 到 example6 4.html# Cheetah 锚 点 --> 
<br> 
<br> 
<br> 
<br> 
<a【 代 码 5]> 狮 子 </a> ”<!-- 定 义 锚 点 Lion --> 
</p> 
<p><img src= "44.gif" width= "255" height= "167"> < /p> 
<p> < img src= "33.jpg" width= "255" height= "177"></p> 
<p><img src= "lion.gif" width= "256" height= "169">< /p> 
<p> 狮 子 的 吼声 从 八 千 米 之 外 就 能 听 到 ! 雄 狮 (很 容易 从 紧 毛 识别 出 雌雄 ) 的 重量 高 达 250 千克 。 而 
肉 狮 则 要 小 得 多 , 重 180 千克。 
<br> 
<br> 
<a【 代 码 可 > 斑马 < /a> <!-- 定 义 锚 点 Zebra --> 
<P>< img src= "66.jpg" width= "400" height= "269"> 
<p> < img src= "77.jpg" width= "400" height= "266"> 
<p>< img src= "55.jpg" width= "400" height= "269"> 
<p> 没 有 任何 两 匹 班 马 的 斑纹 完全 一 样 , 因 此 每 匹 斑马 都 是 独一无二 的 。 斑 马 也 称 为 黑白 条 纹 相 间 
的 马 。 大 多 数 动物 学 家 相信 斑纹 对 动物 界 的 活动 有 重要 作用 , 即 可 以 通过 它 来 区 分 斑马 与 其 他 
动物 。 
</body> 
</html> 


example6_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/lo0se.dtd"> 
<html> 
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Te <head> 

<title> 人 与 动物 和 谐 相处 < /title> 

< /head> 

<body> 

<a【 代 码 了 > 人 类 < /a>< !-- 定 义 锚 点 Race --> 

<p> < img src= "race.jpg" width= "100" height= "100"> 

<p> 人 种 (race), 亦 称 种 族 ,是 由 具有 形态 上 和 生理 上 的 特点 和 语言 习俗 等 历史 文化 因素 组 成 的 有 区 
域 性 特点 的 群体 。 根 据 人 种 的 自然 体质 特征 ,生物 学 家 以 本 质 主义 方式 ( 即 以 体质 特征 为 标准 ) 
通常 将 全 世界 的 现代 人 类 划分 为 四 大 人 种 : 欧罗巴 人 种 (又 称 白 色 人 种 或 高 加 索 人 种 或 欧 亚 人 
种 )、 蒙 古人 种 (又 称 黄色 人 种 或 亚 美 人 种 )、 尼 格 罗 人 种 (又 称 黑色 人 种 或 赤道 人 种 ) 和 澳大利亚 
人 种 (又 称 大洋 洲 人 种 或 棕色 人 种 ) ,俗称 白 种 人 、 黄 种 人 、 黑 种 人 和 棕 种 人 。 

<br><br> 

<a【 代 码 9> 印 度 豹 < /a> < !-- 定 义 锚 点 Cheetah --> 

<p> < img src= "2.jpg" width= "311" height= "450"> 

<p> < img src="1.jpg" width= "410" height= "356"> 

<p> 印 度 豹 以 快速 奔跑 著称 ,其 速度 可 与 飞机 媲美 。 它 是 所 有 陆 上 动物 中 跑 得 最 快 的 动物 。 


< /body> 
</html> 
3. 任 务 小 结 或 知识 扩展 


从 上 面 任务 中 可 以 看 出 ,使 用 锚 点 链接 浏览 页 面 方便 了 许多 ,但 是 如 果 锚 点 使 用 不 当 ， 
页 面 跳 转 会 显得 非常 混乱 。 


4 代码 模板 的 参考 答案 


【代码 1】: href=#Lion 

【代码 2]: href=example6 4.html# Race 
【代码 3]: href=#2Zebra 

【代码 4]: href= example6 4.html# Cheetah 
【代码 5]: name=Lion 

【代码 6]】: name= zebra 

【代码 7]: name=Race 

【代码 8】: name= Cheetah 


Be4 实践 环节 


编写 网 页 (6. 2 实践 环节 . html) ,网 页 中 有 个 二 h2 二 标题 “吉林 长 白山 ,标题 下 面 一 
行 有 5 个 链接 : 简介 、 区 域 .地 理 信息 、 和 胜景 .长 白山 旅游 线路 ,分 别 链接 到 不 同 的 5 个 锚 点 
上 : #jianjie、#quyu、#dili、 上 # shengjing、#1lvyou, 页 面 运行 效 果 如 图 6. 3 所 示 。 
| 加 区 [http://1ocalhost:8080/ch8/6.2 实 路 环节 . html 闻 | 区 

吉林 长 白山 
简介 区 域 ”地 理 信息 。 胜景 ”长 白山 旅游 线路 


简介 


长 白山 《Changbai Mountain) ， 亦 作 白头 山 Beakdu Mountain)， 是 东北 第 一 高 峰 ， 号 称 - 东 
北 屋 峭 -， 位 于 今 中 国 吉林 省 和 朝鲜 两 江道 三 池 渊 郡 。 


6.3 6.2 实 践 环 节 . html 运行 效果 


Es 
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6.3 在 网 页 中 使 用 其 他 链接 


631 核心 知识 

在 网 页 中 除了 创建 以 上 讲述 的 链接 外 ,还 可 以 创建 到 外 部 网 站 的 链接 .下 载 文件 链接 以 
及 E-mail 链接 。 

1. 外 部 网 站 的 链接 

链接 到 外 部 网 站 是 指 从 当前 网 站 跳 转 到 另 一 个 网 站 ,一 般 情况 下 这 种 链接 需要 使 用 绝 
对 的 链接 路 径 , 大 多 数 使 用 HTTP 协议 实现 外 部 网 站 的 链接 ,语法 格式 如 下 : 


<a href="http:// 网 站 地 址 "> 链接 内 容 < /a> 


其 中 ,“http://” 表 明 有 关 HTTP 协议 的 外 部 网 站 的 链接 ,在 其 后 输入 网 址 即 可 链接 到 该 
网 站 。 

2 下 载 文件 链接 

当 需 要 在 网 站 中 提供 资料 下 载 时 ,就 需要 为 资料 文件 提供 下 载 链接 。 如 果 超 链接 指向 
的 不 是 一 个 网 页 文件 ,而 是 其 他 文件 ,如 ZIP、RAR、MP3、EXE 文件 等 , 单 击 链接 时 就 会 下 
载 相 应 的 文件 。 下 载 文件 链接 的 语法 格式 如 下 : 


<a href= "文件 路 径 "> 链接 内 容 < /a> 


3. E-mail 链接 

在 网 页 中 使 用 E-mail 链接 ,可 以 使 浏览 者 快速 地 写 邮 件 反 馈 自 己 的 意见 。 当 单 击 
E-mail 链接 时 ,会 立即 打开 浏览 器 默认 的 E-mail 程序 ,E-mail 链接 会 自动 写 人 收 件 人 地 址 ， 
无 须 浏览 者 再 次 输入 。E-mail 链接 的 语法 格式 如 下 : 


<a href- "mailto: 电 子 邮 件 地 址 "> 链接 内 容 < /a> 


其 中 ,电子 邮件 地 址 的 后 面 还 可 以 添加 一 些 参 数 实现 邮件 发 送 。 这 些 参数 可 以 是 cc、 
subject .bcc 以 及 body 等 。 参 数 语 法 如 下 : 
(1) 抄 送 收 件 人 的 地 址 


<a href= "mailto: 电 子 邮件 地 址 ?cc= 抄 送 收 件 人 的 邮件 地 址 "> 链接 内 容 </a> 
(2) 电子 邮件 的 主题 

<a href= "mailto: 电 子 邮件 地 址 ?subject= 主 题 文字 "链接 内 容 < /a> 

(3) 暗 送 收 件 人 的 地 址 

<a href= "mailto: 电 子 邮 件 地 址 ?bcc= 上 暗 送 收 件 人 的 邮件 地 址 "> 链接 内 容 < /a> 
(4) 电子 邮件 的 内 容 

<a href= "mailto: 电 子 邮 件 地 址 ?pody= 邮 件 内 容 "> 链接 内 容 < /a> 
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Eee 能 力 目标 


能 使 用 二 a 二 标记 创建 从 当前 网 站 到 另 一 个 网 站 的 链接 ,能 使 用 二 a 二 标记 创建 E-mail 
链接 。 
633 任务 驱动 
1. 任 务 的 主要 内 容 
编写 网 页 (example6_5. html) ,网 页 中 个 h2 标题 “自制 hao123. com”, 标 题 下 面 一 行 有 4 
个 超 链 接 : 百度 ,新 浪 \ 搜 狐 、 文 件 下 载 ,分 别 链接 到 不 同 的 目标 页 面 或 文件 : http://www. baidu. 


com、http://www. sina. com. cn、http://www. sohu. com、myfile. rar; 网 页 运行 效果 如 图 6.4(a) 所 
示 , 单 击 “ 文 件 下 载 " 超 链接 时 ,下 浏览 器 会 打开 下 载 页 面 ,下 载 页 面 如 图 6.4(b) 所 示 。 


Sm r/ost e000/che/exmrlee .hnl lI 


自制 hao123.com 


下 载 充 成 后 关闭 此 对 话 框 忆 ) 
文件 下 载 
您 想 打开 或 保存 此 文件 吗 ?7 


名 称 : myfile rar 
关 型 。 WinRAR 档案 立 件 ，169 字 : 
从 : 了: eh 在 网 页 中 - - 


打开 @) 保存 SG) ] [一 到 瑞 
回 打开 此 闫 文件 前 总 是 询问 QE) 


> 革 衬 和 生生 ” 5 果 要 拓 并 臣 咎 


(b) 下 载 页 面 
图 6.4 


2 任务 的 代码 模板 
将 下 列 example6_5. html 中 的 [代码 替换 为 HTML 代码 。 
example6_5. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>example6 5.html< /title> 

< /head> 


<body> 
<h2 align= "center"> 自制 hao123.com< /h2> 


<a【 代 码 1]> 百 度 < /a> <! 一 链接 到 http://www.baidu.com --> 
<a【 代 码 2]> 新 浪 </a> < ! 一 链接 到 http://www.sina.com.cn --> 
<a【 代 码 习 > 搜 狐 < /a> < ! 一 链接 到 http://www.sohu.com 一 > 
<a【 代 码 4]> 文 件 下 载 </a> <!-- 链 接 到 myfile.rar --> 

< /body> 

</htm> 


3. 任务 小 结 或 知识 扩展 
链接 到 外 部 网 站 时 ,要 保障 网 络 是 畅通 的 ,否则 打 不 开外 部 网 站 的 目标 页 面 或 文件 。 


4 代码 模板 的 参考 答案 


【代码 1]: href= "http://www.baidu.com" 
【代码 3]: href= "http://www.sina.com.cn" 
【代码 3]: href= "http://www.sohu.com" 
【代码 4]: href= "myfile.rar" 


634 实践 环节 

编写 网 页 (6. 3 实践 环节 . html) ,网 页 中 有 个 h3 标题 :“ 写 一 封 家 书 ”。 标 题 下 面 一 行 
有 个 E-mail 超 链接 :“ 给 爸爸 写 封 邮件 ,邮件 主题 为 “I want to go home”, 邮 件 地 址 为 
“father@126. com”。 网 页 运行 效果 如 图 6.5(a) 所 示 , 单 击 * 给 爸爸 写 封 邮件 ” 超 链 接 ,会 打 
开 Windows 邮件 服务 软件 OutLook, 如 图 6.5(Cb) 所 示 。 


已 己 面 连 |http://localhost:8080/ch6/6.3 实 践 环 节 , html 


写 一 封 家 书 
给 爸爸 写 封 邮 件 
(a) 6.3 实 践 环 节 .html 运 行 效果 


收 件 人 (©).。 | [fatherel26. com 
抄 送 人- 
主 看 (U: Iwant to go home 
1 国 


(b) OutLook 运 行 效果 
6.5 


6.4 小 结 


超 链 接 的 作用 是 建立 从 一 个 位 置 到 另 一 个 位 置 的 链接 。 使 用 二 a 二 标记 可 以 在 网 页 中 
定义 一 个 超 链 接 , 链 接 路 径 可 以 分 为 相对 路 径 和 绝对 路 径 。 不 管 是 相对 路 径 还 是 绝对 路 径 ， 
在 使 用 超 链接 时 ,都 要 把 链接 路 径 写 正确 。 
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习 题 6 
1. 当 链 接 指 向 下 列 哪 一 种 文件 时 ,不 打开 该 文件 ,而 是 提供 给 浏览 器 下 载 ? 〈 
A. ASP B. HTML G ZIP Jer 
2. 下 列 哪 一 项 是 在 新 窗口 中 打开 网 页 文档 ? ( ) 
A. _self B. _blank C. _top D. _parent 


3. 车 要 在 页 面 中 创建 一 个 图 像 超 链 接 , 要 显示 的 图 像 为 myhome. png, 所 链接 的 地 址 
为 http://www. pcnetedu. com, 以 下 选项 中 正确 的 是 ( js 
A. =a href="http://www. pcnetedu. com">myhome. png <=/a> 
B. =a href="http://www. pcnetedu. com"><img src 一 "myhome. png"><=/a> 
C. <img src 一 "myhome. png"><a href ="http://www. pcnetedu. com"></a> 
D. =a href ="http://www. pcneredu. com"><img src="myhome. png"> 
4. 要 将 页 面 的 当前 位 置 定义 成 名 为 “vbpos” 的 锚 点 ,其 定义 方法 正确 的 是 ( Fs 
A. =a href="vbpos"><=/a> 
B. <a href="#vbpos">vbpos</a> 
C. <a name="vbpos"> 
D. =a name="vbpos"></a> 
5. 以 下 创建 E-mail 链接 的 方法 ,正确 的 是 (。”)。 
A. 二 a href 二 "master@163. com" 放 管理 员 二 /a 
B. 二 a href 王 "callto:master@163. com" 二 管理 员 一 /a 二 
C. 二 a href 二 "mailto:master@163. com" 二 管理 员 一/a> 
D. 二 a href 王 "Email:master@163. com'" 过 管理 员 一 /a> 
6. 常见 的 超 链接 有 哪 几 种 ? 
7. 相对 路 径 与 绝对 路 径 有 什么 区 别 ? 什么 时 候 使 用 相对 路 径 ? 什么 时 候 使 用 绝对 


在 一 个 网 页 中 ,无 论 排 列 文本 内 容 还 是 对 图 像 数据 等 元 素 进行 排版 ,表格 元 素 都 起 到 
至 关 重 要 的 作用 。 表 格 以 简洁 明了 的 方式 ,将 文本 内 容 ` 数 据 ` 图 像 等 元 素 有 序 地 显示 在 网 
页 上 。 本 章 将 重点 介绍 表格 的 创建 .表格 的 属性 、 表 格 的 嵌 套 以 及 表格 的 结构 。 


7.1 创建 表格 


Z11 核心 知识 


一 个 表格 由 行 、 列 和 单元 格 构成 ,可 以 有 多 行 ,每 行 可 以 有 多 个 单元 格 。 在 网 页 中 ,表格 
也 是 由 标记 创建 的 。 


1.table.tt 和 也 标记 
表格 的 3 部 分 : 行列 和 单元 格 , 一 般 通 过 3 个 标记 来 创建 。 标 记 table 创建 表格 ,标记 
tr 创建 行 ,标记 td 创建 单元 格 。 行 是 水 平方 式 的 ,贯穿 表格 的 左右 ; 列 是 垂直 的 ;单元 格 是 
行 和 列 交会 的 部 分 ,是 输入 和 显示 信息 的 地 方 。 创 建 表格 要 以 过 table 二 标记 开始 ,以 
二 /table 二 标记 结束 ,语法 格式 如 下 : 
<table> 
<tr> 


<td> 单 元 格 中 的 内 容 < /ta> 
<td> 单 元 格 中 的 内 容 < /td> 


</tr> 
<tr> 


<td> 单 元 格 中 的 内 容 < /td> 


' ”CEPT CS 网 页 设计 教学 做 一 体 化 教程 
za) 
oad <td> 单 元 格 中 的 内 容 < /ta> 


/tr> 


</table> 


在 一 个 表格 中 包含 几 组 二 tr 和 二 /tr 二 标记 ,就 表示 该 表格 有 几 行 。 二 td 和 二 /td 
标记 分 别 表示 单元 格 的 开始 和 结束 ,在 一 行 中 包含 几 组 二 td 宝 和 二 /td 二 标记 ,就 表示 该 行 
中 有 几 个 单元 格 。 

2 标题 标记 caption 

一 个 表格 中 只 含有 一 个 二 caption 二 标记 用 于 设置 表格 的 标题 ,语法 格式 如 下 : 

<table> 

<caption> 表 格 的 标题 < /caption> 
<tr> 


<td> 单 元 格 中 的 内 容 < /td> 
<td> 单 元 格 中 的 内 容 < /td> 


</tr> 

Ee 
<td> 单 元 格 中 的 内 容 < /td> 
<td> 单 元 格 中 的 内 容 < /td> 


</tr> 
< /table> 
3. 表 头 标记 th 
去 th> 是 过 td 单元 格 的 一 种 变 体 ,实质 上 是 一 种 单元 格 ,用 来 显示 表 头 信息 。 默 认 情 
况 下 ,浏览 器 会 以 粗 体 和 居中 的 样式 显示 过 th 之 标记 中 的 内 容 。 表 头 标记 的 语法 格式 如 下 : 


<table> 
<tr> 
<th> 表 头 中 的 内 容 < /th> 
<th> 表 头 中 的 内 容 < /th> 


< /tr> 

<tr> 
<td> 单 元 格 中 的 内 容 < /td> 
<td> 单 元 格 中 的 内 容 < /td> 


< /tr> 


</table> 


Z12 能 力 目标 
能 使 用 <table> .<<tr> 和 <<td> 标 记 创建 表格 ,会 设置 一 个 表格 的 标题 和 表 头 。 


7.13 任务 驱动 


1 任务 的 主要 内 容 

编写 网 页 example7_1. html, 在 该 页 面 中 有 个 表格 ,表格 的 标题 为 “王菲 单 曲 ”, 表 格 有 4 
行 ,第 一 行为 表 头 “序号 ”与 曲名”, 运行 效果 如 图 7. 1 所 示 。 
加 [http: /locdlhost 60000/chi/exanplel lhinl 国 | > 


王 非 单 曲 
序号 ”曲名 
1 ”因为 爱情 
2 ”红豆 
3 ”传奇 


图 7.1 example7_1. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example7_1. html 中 的 [代码 3 替换 为 HTML 代码 。 


example7_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0org/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 1.html< /title> 
< /head> 
<body> 
<table> 
【代码 1]< !-- 创建 标题 "王菲 单 曲 " --> 
二 人 
【代码 3]< !-- 创 建 表 头 "序号 " --> 
【代码 3]< !-- 创 建 表 头 "曲名 " --> 
< /tr> 
二 
<td> 1< /td> 
<td> 因 为 爱情 < /td> 
< /tr> 
<tr> 
<td> 2< /td> 
<td> 红 豆 < /td> 
</tr> 
<tr> 
<td> 3< /td> 
<td> 传 奇 </td> 
< /tr> 
</table> 
< /body> 
</html> 


”页 计 玫 学 做 一 体 化 教 和 
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机 3 .任务 小 结 或 知识 扩展 
使 用 二 caption 之 标记 创建 表格 标题 的 好 处 是 将 标题 定义 在 表格 中 ,如 果 表 格 移动 , 则 
标题 会 随 着 表格 进行 相应 的 移动 。 
一 般 情况 下 ,在 表格 的 第 一 行使 用 过 th 之 标记 设置 表 头 。 志 th 之 起 始 标记 必须 有 ， 
二 /th 二 结尾 标记 是 可 选 的 。 
在 一 个 网 页 中 ,根据 需要 可 以 使 用 二 table 二 标记 创建 任意 多 个 表格 。 
4 代码 模板 的 参考 答案 


【代码 ]1: < caption> 王 菲 单 曲 < /caption> 
【代码 2]: <th> 序 号 < /th> 
【代码 习 : <th> 曲 名 < /th> 

7.14 实践 环节 


在 example7_1. html 页 面 中 再 次 使 用 二 caption 之 标记 添加 一 个 标题 “caption 在 表格 中 
只 能 使 用 一 次 ”运行 网 页 ,并 分 析 网 页 运行 效果 。 


7.2 设置 表格 的 宽度 、 高 度 以 及 对 齐 方式 


Ze1 核心 知识 
1. 设 置 表格 的 宽度 
可 以 使 用 width 属性 设置 表格 的 宽度 ,语法 格式 如 下 : 
<table width= "表格 宽度 " > 

如 果 不 指定 表格 宽度 , 则 浏览 器 会 根据 表格 内 容 自动 调整 宽度 。 


2 设置 表格 的 高 度 
可 以 使 用 height 属性 设置 表格 的 高 度 ,语法 格式 如 下 : 


<table height = "表格 高 度 " > 
如 果 不 指 定 表格 高 度 , 则 浏览 器 会 根据 表格 内 容 自 动 调整 高 度 。 


3. 设置 表格 的 对 齐 方式 
可 以 使 用 align 属性 设置 整个 表格 在 页 面 中 的 对 齐 方式 ,语法 格式 如 下 : 


<table align= "对 齐 方式 " > 


默认 情况 下 ,整个 表格 在 页 面 中 是 左 对 齐 的 。 当 align 的 取 值 为 left 时 ,整个 表格 在 页 
面 中 左 对 齐 ; 当 align 的 取 值 为 center 时 ,整个 表格 在 页 面 中 居中 对 齐 ; 当 align 的 取 值 为 
right 时 ,整个 表格 在 页 面 中 右 对 齐 。 


Zee ”能力 目标 
能 使 用 width、height 和 align 属性 设置 表格 的 宽度 、 高 度 和 对 齐 方式 。 


723 任务 驱动 


1. 任 务 的 主要 内 容 
编写 网 页 example7_2. html, 在 网 页 中 有 个 居中 对 齐 的 表格 ,表格 的 高 度 为 300 ,宽度 为 
200 ,运行 效果 如 图 7. 2 所 示 。 


ttp:7/iocalhost:60601chy/exanple7_2.htnl 加 芭 
日 期 天 气 情况 
2012-05-12 晴天 
2012-05-13 多 云 
2012-05-14 阴 天 


图 7.2 example7_2. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example7_2. html 中 的 [代码 替换 为 HTML 代码 。 
example7_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 2.html< /title> 
< /head> 
<body> 
<table【 代 码 2] 【代码 3 代码 习 border=1> 
<! 一 代码 1 设置 表格 居中 对 齐 , 代 码 2 设置 表格 的 宽度 为 300, 代 码 3 设置 表格 的 高 度 为 200--> 
<tr> 
<th> 日 期 </th> 
<th> 天 气 情况 < /th> 
</tr> 
<tr> 
<td align= "center"> 2012- 05- 12< /td> 
<td align= "center"> 晴 天 < /td> 
</tr> 
<tr> 
<td align= "center"> 2012- 05- 13< /td> 
<td align="center"> 多 云 </td> 
</tr> 
<tr> 
<td align= "center"> 2012- 05- 14< /td> 
<td align= "center"> 阴 天 < /td> 
</tr> 
</table> 
< /body> 
</html> 


Ea) 


CEPT 有 IGS 网 页 设计 教学 做 一 体 化 教程 


3 .任务 小 结 或 知识 扩展 

表格 宽度 和 高 度 的 单位 既 可 以 是 像素 (如 300) ,也 可 以 是 百分比 (如 20%)。 百 分 比分 
两 种 情况 : 如 果 不 是 嵌 套 表格 ,那么 百分比 是 相对 于 浏览 器 窗口 而 言 的 ;如 果 是 嵌 套 表格 ， 
那么 百分比 是 相对 于 表格 所 在 的 单元 格 而 言 的 。 

4 代码 模板 的 参考 答案 

【代码 1]: align= "center" 


【代码 3 : width= "300" 
【代码 3]: height= "200" 


ZeE4 实践 环节 


把 example7_2. html 中 的 表格 宽度 和 高 度 改 为 百分比 ,运行 网 页 ,并 分 析 网 页 运行 
效果 。 


7.3 设置 表格 的 边框 


731 核心 知识 
可 以 使 用 border 属性 设置 表格 的 边框 ,包括 边框 的 粗细 、 颜 色 等 。 默 认 情 况 下 ,表格 是 
没有 边框 的 。 
1. 表 格 边框 宽度 
border 属性 用 于 设置 表格 边框 的 粗细 ,语法 格式 如 下 : 
<table border= "边框 宽度 值 " > 


2 表格 边框 颜色 

表格 边框 的 颜色 在 默认 情况 下 是 灰色 的 ,可 以 使 用 bordercolor 属性 设置 边框 的 颜色 。 
设置 边框 颜色 的 语法 格式 如 下 : 

<table border=" 边 框 宽度 值 " bordercolor= "颜色 值 "> 


其 中 ,边框 宽度 值 大 于 0( 和 否则 无 法 显示 边框 的 颜色 ) ,颜色 值 为 十 六 进 制 的 颜色 值 或 英文 的 
颜色 名 称 。 


3. 单 元 格 的 间距 
表格 内 部 每 个 单元 格 之 间 的 间距 可 以 使 用 cellspacing 属性 来 设置 ,语法 格式 如 下 : 


<table border=" 边 框 宽度 值 " cellspacing= "间距 值 "> 


4 单元 格 边框 和 内 容 之 间 的 距离 
单元 格 边框 和 内 容 之 间 的 间距 可 以 使 用 cellpadding 属性 来 设置 ,语法 格式 如 下 : 


<table border- "边框 宽度 值 " cellpadding= "内 容 与 边框 的 间距 值 "> 


732 能力 目标 


能 使 用 border 属性 设置 表格 的 边框 ,包括 边框 的 宽度 、 边 框 的 颜色 、 单 元 格 的 间距 、 单 
元 格 边框 和 内 容 的 间距 。 


733 任务 驱动 


1. 任务 的 主要 内 容 
编写 网 页 example7_3. html, 在 网 页 中 有 个 表格 ,表格 的 边框 宽度 为 3, 边 框 颜色 为 
green ,单元 格 间距 为 4。 网 页 运行 效果 如 图 7. 3 所 示 。 


http://1ocahest:8080/chT/exwple7_3.htnl 加 


卡 扎 菲 
1942-06-07]| 


图 7.3 example7_3. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example7_3. html 中 的 [代码 替换 为 HTML 代码 。 
example7_3. html 


< !DOCTYPE html PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 3.html< /title> 
< /head> 
<body> 
<table【 代 码 21【 代 码 2 代码 3]> 
< ! 一 代码 1 设置 表格 边框 宽度 为 3 代码 2 设置 边框 颜色 为 green, 代 码 3 设置 单元 格 间距 为 4 一 > 
< 
<td> 姓 名 : </td> 
<td> 卡 扎 菲 < /td> 
< /tr> 
<tr> 
<td> 生 日 : </td> 
<td> 1942- 06- 07< /td> 


</tr> 
< /table> 
< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 


边框 宽度 值 一 般 不 超过 5 个 像素 ,过 于 粗大 的 边框 会 影响 表格 的 整体 美观 。border 属 
性 设置 的 表格 边框 只 是 表格 四 周 的 边框 粗细 ,并 不 影响 单元 格 之 间 的 边框 尺寸 。 
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和 4 代码 模板 的 参考 答案 


【代码 1 : border= "3" 
【代码 2】: bordercolor= "green" 
【代码 3]: cellspacing= "4" 


734 实践 环节 


在 example7_3. html 中 使 用 cellpadding 属性 设置 单元 格 内 容 与 单元 格 边框 的 间距 值 
为 50, 并 比较 设置 前 与 设置 后 的 页 面 运行 效果 ,设置 后 的 页 面 运行 效果 如 图 7.4 所 示 。 


S$ |http://1ocalhost:8080/chT/exwnple7_3.htnl 加 > 
姓名 卡 扎 非 
生日 ， 1942-06-07 


图 7.4 example7_3. html 修改 后 的 运行 效果 


7.4 设置 表格 的 背景 


741 核心 知识 
表格 在 网 页 中 创建 之 后 ,可 以 为 表格 设置 不 同 的 背景 来 美化 表格 ,如 设置 表格 的 背景 色 
和 背景 图 像 。 


1. 设 置 表格 的 背景 色 
bgcolor 属性 用 来 设置 表格 的 背景 颜色 ,语法 格式 如 下 : 


<table bgcolor= "颜色 值 "> 


2 设置 表格 的 背景 图 像 
美化 表格 时 ,不 仅 可 以 设置 表格 的 背景 色 , 还 可 以 设置 表格 的 背景 图 片 。 设 置 表格 背景 
图 像 的 语法 格式 如 下 : 


<table background- "背景 图 片 路 径 "> 


742 能 力 目标 
能 使 用 bgcolor 属性 设置 表格 的 背景 色 , 能 使 用 background 属性 设置 表格 的 背景 图 像 。 


743 任务 驱动 


1. 任 务 的 主要 内 容 
编写 网 页 example7_4. html, 在 网 页 中 有 个 表格 ,表格 的 背景 色 为 lightblue。 网 页 运行 
效果 如 图 7.5 所 示 。 


|http://localhost:6080/chT/exanpleT 4. htnl 加 已 
姓名 卡 扎 非 
人 性别 田 


利比亚 


生日 11942-06-07 


图 7.5 example7_4. html 的 运行 效果 


2 任务 的 代码 模板 
将 下 列 example7_4. html 中 的 [代码 替换 为 HTML 代码 。 
example7_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0org/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 4.html< /title> 
< /head> 
<body> 
<table【 代 码 1】border= "1"> 
<! 一 代码 1 设置 表格 的 背景 色 为 lightblue --> 
EL 
<td> 姓 名 : </td> 
<ta> 卡 扎 菲 < /td> 
</tr> 
<tr> 
<td> 性 别 < /td> 
<td> 男 < /td> 
< /tr> 
<tr> 
<td> 国 籍 < /td> 
<td> 利 比 亚 </td> 
< /tr> 
<tr> 
<td> 生 日 </td> 
<td>1942- 06- 07< /td> 
</tr> 
</table> 
< /body> 
</html> 
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3. 任务 小 结 或 知识 扩展 
如 果 表 格 的 行 或 单元 格 设置 了 背景 色 , 那 么 表格 的 背景 颜色 会 被 覆盖 。 如 果 一 个 表格 
既 设置 背景 色 又 设置 背景 图 片 ,那么 背景 图 片 会 覆盖 掉 背 景色 。 


4 代码 模板 的 参考 答案 


【代码 11: bgcolor= "lightblue" 


744 实践 环节 


在 example7_4. html 页 面 中 使 用 background 属性 给 表格 设置 背景 图 片 ,运行 修改 后 的 
网 页 ,并 分 析 运 行 效果 。 


7.5 设置 表格 的 行 属性 


ZS1 核心 知识 

在 网 页 中 设计 表格 时 ,除了 使 用 表格 标记 一 table 过 的 属性 从 整体 上 设计 表格 样式 外 ， 
还 可 以 使 用 行 标记 二 tr 二 的 属性 逐 行 设计 行 的 样式 。 

1 设置 行 的 高 度 

在 网 页 中 使 用 表格 时 ,偶尔 遇 到 表格 中 某 一 行 的 高 度 与 其 他 行 不 同 ,这 时 就 需要 使 用 
< 一 tr 二 标记 的 height 属性 设置 该 行 的 高 度 , 语 法 格式 如 下 


<tr height= " 行 的 高 度 值 " > 


2 设置 行文 字 的 水 平 对 齐 方式 
二 tr 二 标记 的 align 属性 可 以 用 于 设置 表格 行内 文字 的 水 平 对 齐 方式 ,语法 格式 如 下 : 


<tr align= "对 齐 方式 " > 


3. 设 置 行 的 边框 颜色 
到 tr 盖 标记 的 bordercolor 属性 可 以 用 于 设置 行 的 边框 颜色 ,语法 格式 如 下 : 


<tr bordercolor= "颜色 值 "> 


4 设置 行 的 背景 颜色 
到 tr 标记 的 bgcolor 属性 可 以 用 于 设置 行 的 背景 颜色 ,语法 格式 如 下 : 


<tr bgcolor= "颜色 值 "> 


ZSe 能力 目标 
能 使 用 一 tr 标记 的 各 种 属性 设置 行 的 样式 ,包括 行 的 高 度 .边框 颜色 以 及 背景 颜色 。 


753 任务 驱动 


1. 任 务 的 主要 内 容 
编写 网 页 example7_5. html, 在 网 页 中 有 个 表格 ,表格 共有 3 行 数据 ,第 1 行 的 背景 颜 


色 为 cyan, 第 3 行 的 边框 颜色 为 red。 网 页 运行 效果 如 图 7.6 所 示 。 


一 国 $ http:/flocalhost :B080/chT/example?_5. htnl 国 区 
姓名 ” 戎 蕊 硅 性 别 : 男 
国籍 : ”中 生日 : 2002-06-07 
政治 面貌 : | 群众 | 爱好 : | 隆 沉 


7.6 example7_5. html 的 运行 效果 


2 任务 的 代码 模板 
将 下 列 example7_5. html 中 的 [代码 ] 替 换 为 HTML 代码 。 
example7_5. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 5.html< /title> 
< /head> 
<body> 
<table border= "1"> 
<tr【 代 码 1]>< !-- 代 码 1 设置 行 的 背景 色 为 cyan --> 
<th> 姓 名 : < /th> 
<td> 戎 芦 娃 < /td> 
<th> 性 别 : < /th> 
<td> 男 < /td> 
< /tr> 
<tr> 
<th> 国 籍 : </th> 
<td> 中 国 < /td> 
<th> 生 日 : < /th> 
<td> 2002- 06- 07< /td> 
< /tr> 
<t 区 代码 2]>< ! 一 代码 2 设置 行 的 边框 颜色 为 red 一 > 
<th> 政 治 面貌 : < /th> 
<td> 群 众 < /tq> 
<th> 爱 好 : < /th> 
<td> 睡 觉 < /td> 
</tr> 
</table> 
< /body> 
</html> 


人 
ga 
和 和 | 3 任务 小 结 或 知识 扩展 
设置 表格 的 行 属性 是 针对 某 行 有 效 的 ,如 果 某 行 的 样式 与 表格 的 样式 相 冲 突 ,那么 在 该 
行 中 , 行 的 样式 将 覆盖 表格 的 样式 。 
4 代码 模板 的 参考 答案 


【代码 1]: bgcolor= "cyan" 
【代码 3 : bordercolor= "red" 


754 实践 环节 


编写 网 页 practice7_5. html, 该 网 页 中 有 个 表格 ,第 一 行 的 高 度 为 50, 第 一 行 的 背景 色 
为 lightgreen, 第 一 行 的 文字 内 容 右 对 齐 。 页 面 运行 效果 如 图 7.7 所 示 。 


Sm [http.//loculhost.080/chi/practicer. 5. htnl Ea 


lx1=1 1x2=2 1x3=3 1x4=4 


2x2=4Px3=6 [2x4=8 2xs=10 
3x3=9Bx4=12Bxs=153x6=18 


图 7.7 practice7_5. html 的 运行 效果 


7.6 设置 表格 的 单元 格 属性 


一 个 表格 可 以 有 多 行 ,一 行 可 以 有 多 个 单元 格 。 单 元 格 是 表格 中 最 基本 的 单位 。 
一 td 二 单元 格 标记 都 要 包含 在 行 标记 一 tr 二 里 面 ,一 行 可 以 有 任意 多 个 单元 格 。 程 序 员 可 
以 设置 单元 格 的 各 种 样式 ,这 些 样式 将 覆盖 一 table 之 和 一 tr> 已 经 定义 好 的 样式 。 
ZE1: 核心 知识 

1. 设 置 单元 格 的 宽度 和 高 度 

在 默认 状态 下 ,单元 格 的 大 小 会 根据 自己 的 内 容 自 动 调整 ,程序 员 可 以 通过 width 和 
height 调整 单元 格 的 宽度 和 高 度 , 语 法 格式 如 下 : 


<td width=" 单 元 格 的 宽度 值 " height=" 单 元 格 的 高 度 值 "> 


2 设置 单元 格 的 水 平 跨 度 ( 跨 多 列 ) 

在 制作 表格 时 ,可 能 需要 某 个 单元 格 占据 多 列 的 位 置 ,这 时 候 就 要 使 用 colspan 属性 设 
置 该 单元 格 所 跨 的 列 数 , 语 法 格式 如 下 : 

<td colspan= "路 的 列 数值 "> 


如 下 表 第 一 行 的 单元 格 的 水 平 跨度 为 5。 


3. 设置 单元 格 的 垂直 跨度 ( 跨 多 行 ) 

在 制作 表格 时 ,可 能 需要 某 个 单元 格 占据 多 行 的 位 置 ,这 时 候 就 要 使 用 rowspan 属性 
设置 该 单元 格 所 跨 的 行 数 。 

<td rowspan=" 跨 的 行 数值 "> 


如 下 表 第 一 个 单元 格 的 垂直 跨度 为 2。 


4 设置 单元 格 的 对 齐 方式 

单元 格 对 齐 方式 的 设置 方法 与 行 对 齐 方式 的 设置 方法 一 样 ,读者 可 以 参考 二 tr 之 标记 
的 align 和 valign 属性 来 设置 单元 格 的 对 齐 方式 。 

5 设置 单元 格 的 背景 色 .边框 颜色 

单元 格 的 背景 色 ,边框 颜色 的 设置 方法 与 行 的 背景 色 ,边框 颜色 的 设置 方法 一 样 ,读者 
可 以 参考 二 tr 二 标记 的 bgcolor 和 bordercolor 属性 来 设置 单元 格 的 背景 色 ,边框 颜色 。 


7Z62 能力 目标 
能 使 用 一 td 二 标记 的 各 种 属性 设置 单元 格 的 样式 ,包括 高 度 、 宽 度 、 水 平 跨度 、 垂 直 跨 

度 .边框 颜色 以 及 背景 颜色 。 

763 任务 驱动 


1. 任 务 的 主要 内 容 
编写 网 页 example7_6. html, 在 网 页 中 有 个 表格 ,表格 标题 为 “个 人 简历 ”, 边 框 宽度 为 
1 ,边框 颜色 为 green。 网 页 运行 效果 如 图 7.8 所 示 。 


富国 |http://localhost:8080/ch?/exampleT_B. html 闻 | 可 
个 人 简历 
隆 名 孙悟空 | 性 别 国 
赈 相 资料 政治 面貌 群众“ 出 生日 期 |19gg-12-09| 
业余 爱好 
| 替身 各 种 球 类 《和 包括 中 国足 球 ) | 看 言情 | 中 山 于 马路 


图 7.8 example7_6. html 的 运行 效果 


2 任务 的 代码 模板 

将 下 列 example7_6. html 中 的 [代码 替换 为 HTML 代码 。 

example7_6. html 

< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/ 
loose.dtd"> 


<html> 
<head> 


| ”EMV CS 网 页 设计 教学 做 一 体 化 教程 


<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 6.html< /title> 
< /head> 
<body> 
<table border= "1" bordercolor= "green"> 
<caption> 个 人 简历 < /caption> 
<tr> 
<th【 代 码 1] align= "left"> 基 本 资料 </th><!-- 代 码 1 设置 单元 格 的 垂直 跨度 为 2 
SR 
<th align= "left"> 姓 名 < /th> 
<td> 孙 悟空 < /td> 
<th align= "left"> 性 别 < /th> 
<td> 男 < /td> 
< /tr> 
<tr> 
<th align= "left"> 政 治 面貌 < /th> 
<td> 群 众 < /td> 
<th align= "left"> 出 生日 期 < /th> 
<td> 1988- 12- 09< /td> 
</tr> 
<tr> 
<th【 代 码 2]> 业 余 爱 好 < /th>< !-- 代 码 2 设置 单元 格 的 水 平 跨度 为 5 --> 
</tr> 
<tr> 
<td> 蔡 身 < /td> 
<td> 各 种 球 类 (包括 中 国足 球 )< /td> 
<td> 看 言情 < /td> 
<td> 爬 山 < /td> 
<td> 压 马路 < /td> 
</tr> 
</table> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

设置 表格 的 单元 格 属性 是 针对 某 个 单元 格 有 效 的 ,如 果 某 个 单元 格 的 样式 与 表格 或 行 
的 样式 相 冲 突 ,那么 在 该 单元 格 中 ,单元 格 的 样式 将 覆盖 表格 或 行 的 样式 。 

4 代码 模板 的 参考 答案 


【代码 11: rowspan= "2" 
【代码 3]: colspan= "5" 


764 实践 环节 


编写 网 页 practice7_6. html, 在 网 页 中 有 个 表格 ,边框 宽度 为 1 ,边框 颜色 为 blue。 网 页 
运行 效果 如 图 7. 9 所 示 。 


第 7 章 


三 己 国 他 |http://localhost:8080/chT/practice7_6.htnl 


1x1=1 
1x2=2||2x2=4 
1x3=3||2x3=6|3x3=9| 


图 7.9 practice7_6. html 的 运行 效果 


7.7 表格 的 嵌 套 


7.7.1 核心 知识 


设计 表格 时 ,可 能 需要 在 表格 的 某 个 单元 格 里 面 放置 很 复杂 的 内 容 , 这 就 需要 在 单元 里 
面 再 能 套 一 个 表格 , 称 为 表格 的 嵌 套 。 表 格 嵌 套 的 语法 格式 如 下 : 
<table> 
<tr> 
<td> 单 元 格 中 的 内 容 < /td> 
<td> 单 元 格 中 的 内 容 < /td> 


</tr> 
<tr> 
<td> 


<table> ..< /table> 
</td> 


<td> 单 元 格 中 的 内 容 < /td> 


< /tr> 


</table> 


其 中 ,任何 一 对 二 td 王 和 二 /td 二 标记 里 面 都 可 以 髋 套 一 个 表格 ,也 就 是 说 表格 一 定 要 榜 套 
在 单元 格 里 面 。 


7.72 ”能力 目标 

能 灵活 使 用 表格 的 嵌 套 原理 布局 复杂 的 页 面 内 容 。 
7.73 任务 驱动 

1 任务 的 主要 内 容 


编写 网 页 example7_7. html, 在 网 页 中 有 个 表格 ,该 表格 共有 两 行 ,第 1 行 有 两 个 单元 


格 , 在 第 1 个 单元 格 里 面 谋 套 1 个 3 行 1 列 的 表格 ,在 第 2 个 单元 格 里 面 谋 套 1 个 1 行 3 列 
的 表格 。 网 页 运行 效果 如 图 7. 10 所 示 。 


2 任务 的 代码 模板 
将 下 列 example7_7. html 中 的 [代码 替换 为 HTML 代码 。 


' ”CEPTES CS 网页 设计 教学 做 一 体 化 教程 


-5 |http://localhost:B060/chT/exanpleT_T. htnl Ba 


学 生 信息 管理 系统 


漠 加 信息 | 了 隶 隋 巴 芒 本 
区 起 信 二 
责 卫 俏 四 ||odn_n)Op6p 洽 -， 今 天 不 错 ， 表 格 学 习 得 很 明白 ， 


图 7. 10 example7_7. html 的 运行 效果 


example7_7. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example7 7.html< /title> 
< /head> 
<body> 
<h2> 学 生 信息 管理 系统 < /h2> 
< table border= "1" bordercolor= "blue"> 
<tr> 
<td rowspan= "2"> 
【代码 1 
<!-- 代 码 1 嵌 套 一 个 3 行 1 列 的 表格 --> 
</td> 
<td> 
【代码 2 
<!-- 代 码 2 嵌 套 一 个 1 行 3 列 的 表格 --> 
</td> 
< /tr> 
<tr> 
<td>0( 站 _ 门 )o 哈 喻 ~ ,今天 不 错 ,表格 学 习 得 很 明白 !< /td> 
< /tr> 
</table> 
</body> 
</html> 


3. 任务 小 结 或 知识 扩展 

在 HTML 页 面 中 ,使 用 表格 排版 是 通过 嵌 套 来 完成 的 , 即 一 个 表格 内 部 可 以 嵌 套 另 一 
个 表格 。 用 表格 来 排版 页 面 的 思路 是 : 由 总 表格 规划 整体 的 结构 ,由 艇 套 的 表格 负责 各 个 
子 栏目 的 排版 ,并 插入 到 表格 的 相应 位 置 ,这 样 就 可 以 使 页 面 的 各 个 部 分 有 条 不 率 , 互 不 冲 
突 ,看 上 去 清晰 整洁 。 在 实际 做 网 页 时 一 般 不 显示 边框 ,边框 的 显示 可 根据 自己 的 爱好 来 设 
定 。 在 实例 中 为 了 让 读者 能 够 看 清楚 ,都 设置 了 边框 。 


4 代码 模板 的 参考 答案 


【代码 1】: < table border= "1" bordercolor= "red"> 


区 
<td> 增 加 信息 < /td> 
</tr> 
ES 
<td> 修 改 信息 < /td> 
</tr> 
<tr> 
<td> 删 除 信息 < /ta> 
</tr> 
</table> 
【代码 3] : < table border= "1" bordercolor= "red"> 
<tr> 
<td> 登 录 < /td> 
<td> 注 册 < /td> 
<td> 退 出 </td> 
</tr> 
</table> 


7.74 ”实践 环节 
编写 网 页 practice7_7. html, 网 页 中 有 个 表格 ,在 该 表格 第 2 行 的 每 一 个 单元 格 中 分 别 
嵌 套 了 一 个 表格 。 网 页 运行 效果 如 图 7. 11 所 示 。 


ST http://localhost:8080/chT/practice? 7. htnl 回忆 | 


网 页 标志 广告 条 


标题 栏 
标题 栏 
标题 栏 
标题 栏 
标题 栏 
标题 栏 
标题 栏 
标题 栏 
标题 栏 


内 容 六 


图 7.11 practice7_7. html 的 运行 效果 


7.8 表格 的 结构 


ZBT1 核心 知识 
为 了 在 设计 网 页 时 ,能 清楚 地 区 分 表格 的 结构 ,HTML 语言 中 有 到 thead>> 一 tbody> 


证 SS 辣 页 说 计 教 学 做 一 体 化 教程 
sa 
和 过 tfoot 之 3 个 标记 分 别 表 示 一 个 表格 的 表 头 、 表 主体 和 表 尾 。 


1. 表 格 的 表 头 标记 <thead> 


表 头 标记 用 于 定义 表格 最 项 端 表 头 的 样式 ,包括 背景 颜色 、 背 景 图 片 、 文 字 对 齐 方式 等 


属性 ,具体 语法 格式 如 下 : 


<table> 
<thead bgcolor=" 背 景 颜 色 " align= "水 平 对 齐 方式 "> 
<trS> 
<td> 表 头 单元 格 内 容 < /td> 
<td> 表 头 单元 格 内 容 < /td> 


</tr> 
< /thead> 


</table> 


2 表格 的 表 主 体 标记 <tbody> 
表 主 体 标记 过 tbody 之 与 表 头 标记 的 功能 类 似 , 用 来 统一 设置 表 主 体 部 分 
语法 格式 如 下 : 


<table> 
<thead bgcolor= "red" align= "center"> 
<tr> 
<td> 表 头 单元 格 内 容 < /td> 
<td> 表 头 单元 格 内 容 < /td> 


</tr> 
</thead> 
<tbody bgcolor= "背景 颜色 " align= "水 平 对 齐 方式 "> 
tr 
<td> 表 主体 单元 格 内 容 < /td> 
<td> 表 主体 单元 格 内 容 < /td> 


< /tr> 
< /tbody> 
</table> 


3. 表格 的 表 尾 标记 <tfoot> 
表 尾 标记 二 tfoot 之 与 表 头 标记 二 thead 这 和 表 主 体 标记 二 tbody 记 一 样 ,月 


的 样式 ,具体 


昌 来 统一 设置 


表 尾 部 分 的 样式 ,具体 语法 格式 如 下 : 


<table> 
< thead bgcolor= "red" align= "center"> 
> 
<td> 表 头 单元 格 内 容 < /td> 
<td> 表 头 单元 格 内 容 < /td> 


</tr> 
< /thead> 
< tbody bgcolor= "green" align= "left"> 
ey 
<tq> 表 主体 单元 格 内 容 < /td> 
<td> 表 主体 单元 格 内 容 < /td> 


< 
< /tbody> 
<tfoot bgcolor= "背景 颜色 " align= "水 平 对 齐 方式 "> 
<tr> 
<td> 表 尾 单元 格 内 容 < /td> 
<td> 表 尾 单元 格 内 容 < /td> 


</tr> 


</tfoot> 
</table> 


7B82 ”能 力 目标 
能 使 用 一 thead>> .一 tbody 之 和 一 tfoot> 标 记 创 建 表格 的 表 头 、 表 主体 和 表 尾 部 分 。 
Z83 任务 驱动 


1 任务 的 主要 内 容 

编写 网 页 example7_8. html, 在 该 网 页 中 有 个 表格 ,表格 包括 表 头 、 表 主体 、 表 尾 3 部 
分 。 表 格 的 第 1 行为 表 头 ,背景 色 为 “LightBLue”。 表 格 的 第 2 一 4 行为 表 主体 ,背景 色 为 
“Cyan”。 表 格 的 第 5 行为 表 尾 , 背 景色 为 “LightGreen”。 网 页 运行 效果 如 图 7.12 所 示 。 


S$ [http://localhost:8080/chi/exanple?_8. htnl 


课程 。 地 点 
10B421 


图 7.12 example7_8. html 的 运行 效果 


2 任务 的 代码 模板 

将 下 列 example7_8. html 中 的 [代码 ] 替 换 为 HTML 代码 。 

example7_8. html 

< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 


loose.dtd"> 
<html> 


SCSS 同 网 设 计 教 学 做 一 体 化 教程 


<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> example7 8.html< /title> 
< /head> 
<body> 
<table border="1"> 


【代码 1]< !-- 代 码 1 创建 表 头 , 表 头 背景 色 为 LightBLue --> 


Xtr> 
<td> 时 间 < /td> 
<td> 课 程 < /td> 
<td> 地 点 < /td> 
</tr> 
< /thead> 
【代码 2]< !-- 代 码 2 创建 表 主 体 , 表 主体 背景 色 为 Cyan --> 
<tr> 


<td> 星 期 一 < /td> 
<tq>Java 实 训 < /td> 
<td>10B421< /td> 
</tr> 
<tr> 
<td> 星 期 二 < /td> 
<td> 影 视 赏析 < /td> 
<td>10B421< /td> 
</tr> 
<tr> 
<td> 星 期 三 < /td> 
<td> 海 峡 两 岸 < /td> 
<td>10B421< /td> 
</tr> 
< /tbody> 
【代码 3]< !-- 代 码 3 创建 表 尾 , 表 尾 背景 色 为 LightGreen 一 > 
EE 
<td colspan= "3"> 本 课表 解释 权 归 教务 处 所 有 。< /td> 
</tr> 
</tfoot> 
</table> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

在 二 thead 记 二 tbody 和 二 tfoot 二 标记 中 可 以 包含 之 tr 之 、 达 th 宝 和 二 td 记 标 记 。 在 
实际 的 网 页 制作 中 , 表 头 、 表 主体 和 表 尾 部 分 的 样式 经 常 由 CSS 指定 。 

4 代码 模板 的 参考 答案 


【代码 11: < thead bgcolor= "LightBLue"> 
【代码 3] : < tbody bgcolor="Cyan"> 
【代码 3]: <tfoot bgcolor= "LightGreen"> 


第 7 总 表格 


oi 


784 实践 环节 


在 网 页 example7_8. html 中 ,如 果 不 使 用 表 头 、 表 主体 和 表 尾 标记 ,如 何 实现 该 网 页 ? 
并 比较 哪 种 实现 方式 更 简便 。 


7.9 小 结 


标记 table 创建 表格 ,表格 里 面 又 有 行 和 列 。 标 记 tr 创建 行 ,标记 td 创建 单元 格 。 行 
是 水 平 的 ,贯穿 表格 的 左右 , 列 则 是 垂直 的 ,单元 格 是 行 和 列 交汇 的 部 分 ,是 输入 和 显示 信息 
的 地 方 。 

通过 table 标记 的 属性 可 以 给 整个 表格 设置 样式 ,通过 tr 标记 的 属性 可 以 给 表格 的 某 
一 行 设置 样式 ,通过 td 标记 的 属性 可 以 给 某 个 单元 格 设置 样 式 。 但 要 注意 , 行 的 样式 会 覆 
盖 表 格 的 样式 ,单元 格 的 样式 会 覆盖 行 的 样式 。 

使 用 colspan 属性 可 以 设置 该 单元 格 所 跨 的 列 数 (水 平 跨度 ) ,使 用 rowspan 属性 可 以 
设置 该 单元 格 所 跨 的 行 数 (垂直 跨度 ) 。 


习 题 7 


1. 要 使 表格 的 边框 不 显示 ,应 设置 border 的 值 是 ( ) 。 

A. 1 B. 0 C2 D:3 
2. 以 下 标记 中 ,用 于 定义 一 个 单元 格 的 是 ( 5 

A. <td>&nbsp;=/td> 

和 > 

C. =<table>...</table> 

D. =caption>...=/caption> 
3. 用 于 设置 表格 背景 颜色 的 属性 的 是 ( )。 


A. background B. bgcolor 
C. bordercolor D. backgroundcolor 
4. 表格 的 开始 标记 为 ( ”)。 
A. =table> B. </table> GG <p> D. <tr> 
5. 以 下 属性 可 以 添加 在 二 table 二 标记 后 面 的 是 ( ee 
A. border B. width C. height D. 以 上 都 可 以 


6. 下 列 对 于 过 th 二 标记 和 二 td 请 标 记 说 法 不 正确 的 是 ( i 
A. 去 th> 和 到 td> 都 可 以 标记 一 个 单元 格 
B. 有 和 多少 个 单元 格 就 有 多 少 个 二 th 二 或 td 二 
C. 去 th> 标 记 所 标记 的 单元 格 的 文字 以 粗 体 出 现 
D. 二 th 这 和 二 td 二 标记 作用 完全 一 样 
7. 下 列 对 于 表格 的 说 法 正确 的 是 ( Ye 
A. 不 可 以 使 用 表格 对 页 面 中 的 内 容 进 行 排版 
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) 

dd B. rowspan 属性 用 于 定义 有 横向 通栏 的 表格 

C. colspan 属性 用 于 定义 有 纵向 通栏 的 表格 

D. 在 页 面 布局 时 为 了 页 面 的 美观 也 经 常用 到 表格 ,但 我 们 却 看 不 见 这 些 表格 ,是 由 

于 border 属性 的 值 被 设 定 为 “0” 了 

8. 下 面 对 于 bgcolor 属性 说 法 正确 的 是 ( hs 

A. 可 以 用 来 定义 表格 的 颜色 

B. 二 table 二 标记 中 必须 出 现 bgcolor 属性 

C. bgcolor 属性 的 值 必须 是 十 六 进 制 的 6 位 数 

D. bgcolor 属性 的 值 必须 是 已 经 定义 好 的 颜色 


“‘ 表单 与 页 面 控 件 


在 制作 动态 网 页 时 ,常用 表单 收集 用 户 的 信息 ,将 用 户 的 信息 通过 表单 封装 提交 给 服务 
器 ,从 而 实现 与 用 户 的 交互 。 因 此 ,表单 是 HTML 页 面 与 服务 器 端 实现 交互 的 重要 手段 。 
本 童 将 重点 介绍 表单 标记 以 及 各 种 表单 对 象 的 用 法 。 


8.1 表单 标记 form 


在 HTML 网 页 中 ,表单 是 用 过 form 之 标记 定义 的 , 它 类 似 于 一 个 容器 ,表单 对 象 必须 
在 表单 中 才 有 效 , 如 input。 
81.1 核心 知识 


1. 处 理 动作 action 
去 form 盖 标记 里 的 action 属性 用 于 指定 表单 数据 提交 给 哪个 程序 进行 处 理 , 语 法 格式 
如 下 : 


<form action= "表单 的 处 理 程序 "> 


其 中 ,表单 的 处 理 程序 是 表单 标记 必 不 可 少 的 参数 , 它 是 表单 要 提交 的 地 址 , 换 句 话说 是 表 
单 收集 到 的 信息 要 传递 到 的 程序 地 址 ,如 某 页 面 。 


2 表单 名 称 name 
在 一 个 网 页 程序 中 ,可 能 需要 多 个 表单 来 提交 信息 ,这 时 就 需要 用 name 属性 给 表单 命 
一 个 名 称 。 表 单 名 称 可 以 控制 表单 与 后 台 程 序 之 间 的 关系 ,语法 格式 如 下 : 


<form action= "表单 的 处 理 程序 " name= "表单 的 名 称 "> 
其 中 ,表单 的 名 称 是 一 个 标识 符 ,不 能 含有 特殊 的 字符 和 空格 。 


) 
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3. 表单 提交 方法 method 

去 form> 标 记 里 的 method 属性 用 于 指定 使 用 哪 种 提交 方法 将 表单 数据 提交 到 服务 
器 。 默 认 情 况 下 ,提交 方法 为 get, 但 get 方法 不 具有 保密 性 ,而 且 不 能 提交 非 ASCII 的 字 
符 。 语 法 格式 如 下 : 


<form action= "表单 的 处 理 程序 " method- "提交 方法 " name= "表单 的 名 称 "> 


其 中 ,表单 的 提交 方法 有 两 种 : get 和 post。get 方 法 将 表单 内 容 以 附件 形式 放 在 URL 地 
址 后 面 , 因 此 有 长 度 限 制 (最 大 8192 个 字符 ) ,而 且 不 安全 。post 方法 将 用 户 在 表单 中 输 
入 的 数据 包含 在 表单 主体 中 ,一 起 提交 给 服务 器 ,该 方法 没有 信息 长 度 的 限制 ,也 比较 
安全 。 

4 编码 方式 enctype 

二 {orm 二 标记 里 的 enctype 属性 用 于 指定 表单 信息 提交 的 编码 方式 ,这 个 编码 方式 通 
常情 况 下 采用 默认 的 (application/x-www-form-urlencoded) 即 可 ,但 上 传 文件 时 必须 选择 
mime 编码 (multipart/form-data) 。 表 单 编码 方式 的 语法 格式 如 下 : 

<form actionr "表单 的 处 理 程序 " method "提交 方法 " enctype= "编码 方式 " name=" 表 单 的 名 称 "> 
其 中 ,编码 方式 有 3 种 情况 : text/plain( 纯 文本 形式 ) .application/x-www-form-urlencoded 


和 multipart/form-data。 
1 能 力 目标 
理解 并 掌握 表单 标记 的 action 属性 ,method 属性 和 enctype 属性 的 用 法 。 
Bl3 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example8_1. html, 具 体 要 求 如 下 : 

。 网 页 中 有 个 h3 标题 “认真 学 习 表单 标记 form 之 ”; 

。 网 页 中 有 个 表单 ,表单 的 处 理 程序 是 action. html, 表 单 的 提交 方法 是 post, 编码 方 
式 采用 默认 的 ; 

。 网 页 example8_1. html 的 运行 效果 如 图 8. 1 所 示 。 


妃 ] E: \HTML 与 css 网 页 设计 \ 第 8 章 表单 与 页 面 控件 \ch8\WebContent\example8_1. html 


镍 exanple3_1 htnl 
认真 学 习 表 单 标记 
输入 您 的 姓名 提交 


8.1 example8_1. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example8_1. html 中 的 [代码 替换 为 HTML 代码 。 


和 6 半天 页 而 下山 》 
和 (人 
example8_1. html Nr 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o0rg/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example8 1.html< /title> 
< /head> 
<body> 
<! 一 代码 1 设置 表单 的 处 理 程序 为 action.html, 代 码 2 设置 表单 的 提交 方式 为 post --> 
<form【 代 码 D1【 代 码 2]> 
输入 您 的 姓名 : < input type= "text" name= "yourName"/> 
< input type= "submit" value= "提交 "/> 
< /form> 
< /body> 
</htm> 


action. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>action.html< /title> 
< /head> 
<body> 
来 自 example8 1.html 页 面 的 请 求 ! 
< /body> 
</htm> 


3. 任务 小 结 或 知识 扩展 

表单 的 处 理 程序 由 action 属性 值 指定 ,如果 该 属性 值 为 空 ,表单 的 处 理 程序 就 是 表单 所 
在 的 页 面 本 身 。 

4 代码 模板 的 参考 答案 


【代码 1 : action= "action.html" 
【代码 3]: method= "post" 


已 14 实践 环节 


把 example8_1. html 页 面 中 表单 的 提交 方法 改 成 get, 用 正 浏览 器 运行 example8_1. html 
页 面 ,输入 姓名 后 单 击 “ 提 交 ” 按 钮 ,仔细 观察 浏览 器 地 址 栏 中 URL 的 变化 。 


8.2 input 标记 一 文本 框 与 密码 框 


在 表单 中 ,input 标记 是 最 常用 的 表单 标记 。input 标记 里 面 有 个 type 属性 值 确定 表单 
对 象 的 类 型 ,如 text 代表 的 是 文本 框 类 型 。 另 外 ,input 标记 必须 放 在 <form> 与 一 /form> 标 
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记 之 间 才 有 效 。 
B21 核心 知识 
1. 文本 框 


如 果 input 标记 的 type 属性 值 为 text, 那 么 这 个 input 标记 (插入 表单 对 象 ) 代 表 的 就 
是 单行 文本 框 ,可 以 输入 任何 类 型 的 文本 数字 或 字母 ,输入 的 内 容 是 单行 显示 。 文 本 框 的 
语法 格式 如 下 : 


<input type="text" value=" 文 本 框 内 的 默认 值 " name=" 文 本 框 的 名 称 " size=" 文 本 框 的 长 度 " 
maxlength= "最 大 字符 数 "/> 


其 中 ,type 属性 指定 插入 哪 种 表单 对 象 ,如 type= "text", 即 插入 的 是 文本 框 ( 文 字 内 容 )， 
value 属性 设置 文本 框 的 默认 值 ;name 属性 是 文本 框 的 名 字 , 用 于 和 页 面 中 的 其 他 控件 进行 
区 分 ,处 理 程序 通过 name 获取 value 的 值 ;size 属性 值 确定 文本 字段 在 页 面 中 显示 的 长 度 ， 
以 字符 为 单位 ; maxlength 属性 值 用 于 设 定 文本 框 中 最 大 可 以 输入 的 字符 数 , 如 下 面 的 
代码 。 

姓名 : < input type= "text" value="" name= "userName"/> 
上 述 代码 呈现 的 结果 如 图 8. 2 所 示 。 

2 密码 框 

如 果 input 标记 的 type 属性 值 为 password, 那 么 这 个 input 标记 代表 的 就 是 密码 框 , 在 
其 中 输入 的 字符 都 是 以 “x* "或 圆 点 *。 "显示 。 密 码 框 的 语法 格式 如 下 : 


<input type= "password" value= "密码 框 的 默认 值 " name= "密码 框 的 名 称 " size= "密码 框 的 长 度 " 
maxlength= "最 大 字符 数 "/> 


其 中 的 属性 和 文本 框 中 的 属性 类 似 , 如 下 面 的 代码 。 
密码 : < input type= "password" value= "123456" name= "pwd"/> 


上 述 代码 呈现 的 结果 如 图 8. 3 所 示 。 


图 8.2 文本 框 呈现 结果 图 8.3 密码 框 呈现 结果 
B22 能 力 目标 
能 使 用 input 设计 文本 框 和 密码 框 。 
B23 任务 驱动 
1 任务 的 主要 内 容 


编写 网 页 example8_2. html, 具 体 要 求 如 下 : 
。 网 页 中 有 个 表单 ,表单 的 处 理 程序 是 页 面 本 身 ; 


。 在 表单 中 有 个 文本 框 ,文本 框 的 最 大 输入 字符 数 为 6; 
。 在 表单 中 还 有 个 密码 框 ,网 页 运行 效果 如 图 8.4 所 示 。 


[eT 当下] E: NTWL 与 css 网 页 设计 \ 第 6 章 表单 与 页 面 控件 \eh8 WebContent\exanp1e8_2. htnl 


遍 收藏 天 涤 exanple8_2.htnl 


账号 ，|000001 
密码 : 


图 8.4 example8_2. html 页 面 运 行 效果 


2 任务 的 代码 模板 
将 下 列 example8_2. html 中 的 [代码 ] 替 换 为 HTML 代码 。 
example8_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.orgVTRVhtml4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example8 2.html< /title> 
< /head> 
<body> 
< form action="" method= "post"> 
< 上 -代码 1 设置 type 的 值 为 text, 代 码 2 设置 文本 框 最 大 输入 字符 数 为 6 --> 
账号 : <inpu 太 代码 1]name="ID" value= "000001"【 代 码 2]/><br> 
<!-- 代 码 2 设置 type 的 值 为 password --> 
密码 : <inpu 共 代码 3]jname= "PWD" value= "123456"/> 


< /form> 
< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 


从 example8_2. html 页 面 的 运行 效果 看 ,文本 框 与 密码 框 的 默认 长 度 是 不 一 样 的 。 一 
般 情 况 下 ,为 了 页 面 美观 需要 使 用 CSS 把 文本 框 与 密码 框 的 长 度 设置 成 相同 。 
在 文本 框 与 密码 框 中 都 有 size 属性 ,其 最 小 值 为 1, 最 大 值 由 浏览 器 的 宽度 决定 。 


4 代码 模板 的 参考 答案 
【代码 1 : type= "text" 


【代码 23]: maxlength= "6" 
【代码 3 : type= "password" 


B24 实践 环节 


使 用 size 属性 把 example8_2. html 中 文本 框 的 文本 字段 在 页 面 中 显示 的 长 度 设置 为 
5, 然 后 运行 example8_2. html 页 面 ,仔细 观察 运行 结果 。 
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8.3 inpnut 标记 一 单 选 按钮 与 复 选 框 
Bal 核心 知识 


1. 单 选 按钮 
单 选 按钮 用 来 让 用 户 进行 单一 选择 ,如 让 用 户 选 择 他 的 性 别 。 单 选 按钮 在 页 面 中 以 圆 
框 (“ 〇 ”) 显 示 ,语法 格式 如 下 : 


<input type= "radio" value=" 单 选 按钮 的 值 " name= " 单 选 按钮 的 名 称 " checked/> 


其 中 , 当 用 户 选中 单 选 按钮 后 ,value 属性 的 值 会 传递 给 处 理 程序 。name 代表 单 选 按钮 的 名 
称 , 一 组 单 选 按钮 的 名 称 都 相同 ,处 理 程序 通过 name 获取 被 选中 的 单 选 按钮 的 value 值 。 
checked 表示 该 单 选 按钮 被 选中 ,而 在 一 组 单 选 按钮 中 只 有 一 个 单 选 按钮 设置 为 checked。 
如 下 面 的 代码 : 

<input type= "radio" value= "male" name= "sex" checked/> 男 

< input type="radio" value= "female" name="sex" /> 女 

上 述 代码 呈现 的 结果 如 图 8. 5 所 示 。 

2 复 选 框 

我 们 经 常 看 到 这 样 的 问题 ,“ 请 选择 您 喜欢 的 歌手 : 口 顾 小 白 口 左 永 邦 口 罗 书 权 ”, 这 
样 的 网 页 就 是 使 用 复 选 框 实现 的 。 复 选 框 与 单 选 按钮 的 不 同 之 处 是 复 选 框 能 够 实现 选项 的 
多 选 ,以 一 个 方 框 (* 口 ”) 表 示 , 语 法 格式 如 下 : 


<input type= "checkbox" value= " 复 选 框 的 值 " name= " 复 选 框 的 名 称 " checked/> 


其 中 , 当 用 户 选 中 复 选 框 后 ,value 属性 的 值 传递 给 处 理 程序 。name 代表 的 是 复 选 框 的 名 
称 , 一 组 复 选 框 的 名 称 都 相同 ,处 理 程序 通过 name 获取 被 选中 的 复 选 框 的 value 值 ( 以 数组 
的 形式 返回 ,数组 元 素 为 被 选中 的 复 选 框 的 value 值 ) 。checked 表示 该 复 选 框 被 选中 ,一 组 
复 选 框 中 可 以 同时 有 多 个 被 选中 。 如 下 面 的 代码 : 

< input type= "checkbox" value= "sunwukong" name= "lover" checked/> 孙 悟空 


< input type= "checkbox" value= "zhubajie" name= "lover" checked/> 猪 八 戒 
< input type= "checkbox" value= "shaseng" name= "lover" /> 沙 僧 


上 述 代 码 呈 现 的 结果 如 图 8. 6 所 示 。 


@ 男 O 女 回 孙 悟空 回 猪八戒 口 沙 僧 
图 8.5 单 选 按钮 旦 现 结果 图 8.6 复 选 框 旦 现 结果 
B32 能 力 目标 


理解 并 掌握 单 选 按钮 与 复 选 框 的 使 用 方法 。 


833 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example8_3. html, 具 体 要 求 如 下 : 

。 网 页 中 有 个 h3 标题 “调查 表 ”; 

。 网 页 中 有 个 表单 ,表单 的 处 理 程序 是 页 面 本 身 ; 
。 网 页 中 有 个 文本 框 用 来 输入 用 户 的 姓名 ; 

。 网 页 中 有 个 密码 框 用 来 输入 用 户 的 密码 ; 

。 网 页 中 有 个 单 选 按钮 供用 户 选择 自己 的 性 别 ; 

。 网 页 中 有 个 复 选 框 供用 户 选择 自己 喜欢 的 城市 ; 
网 页 运行 效果 如 图 8.7 所 示 。 


| 已 ] E; \HTML 与 CSS 网 页 设计 \ 第 6 章 表单 与 页 面 控件 \ch8\WebContent\exenp1e8_3. htnl ~ 


芒 mpl1e3_3.htnl 


调查 表 


姓名 ,| | 
密码 ， 


性 别 ，@ 男 O 女 
选择 您 喜欢 的 城市 。 回 大 连 回 北京 口上 海 口 深圳 
图 8.7 example8_3. html 页 面 运行 效果 


2 任务 的 代码 模板 
将 下 列 example8_3. html 中 的 [代码 替换 为 HTML 代码 。 
example8_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example8 3.html< /title> 
< /head> 
<body> 
<center> 
<h3> 调 查 表 < /h3> 
< form action= "" method= "post"> 
姓名 : <input type= "text" name= "userName"/><br> 
密码 : < input type= "password" name= "pwd"/><br> 
性 别 : <input【 代 码 1]value= "male" name= "sex" checked/> 男 
<input type= "radio" value= "female"【 代 码 2]/> 女 
<br> 
选择 您 喜欢 的 城市 : 
< input【〖 代 码 3jvalue= "DaLian" name= "lover" checked/> 大 连 
< input type= "checkbox" value= "BeiJing" name= "lover" checked/> 北 京 


1 ESICSS 同 网 设计 教学 做 一 体 化 教 积 
100 ， 
Ts < input type= "checkbox" value="ShangHai" name= "lover" /> 上 海 
< input type= "checkbox" value= "ShenZhen" name= "lover" /> 深圳 
< /form> 
</center> 
< /body> 
</htm> 


3. 任务 小 结 或 知识 扩展 

单 选 按钮 用 来 表示 一 系列 的 互 斥 选项 ,这 些 互 斥 项 常常 被 分 成 若干 组 ,每 组 仅 允 许 用 户 
选择 一 个 选项 ; 复 选 框 与 单 选 按 钮 类 似 ,不 同 之 处 是 复 选 框 代表 多 重 选择 ,用 户 可 以 选择 一 
个 或 多 个 选项 。 

4 代码 模板 的 参考 答案 


【代码 1 : type= "radio" 
【代码 3] : name= "sex" 
【代码 3】: type= "checkbox" 


B34 实践 环节 


编写 一 个 网 页 practice8_3. html, 页面 运行 效果 如 图 8. 8 所 示 。 


局 ” [下 mos 网页 设计 二 5 齐 表单 与 页 面 近 件 \NSVGCORLetWrAetIce6L3 ht 


| 


收 送 严 | 铺 practice8_3. htnl 


身份 。 〇 管理 员 @ 普 通用 户 
性 别 ，@ 男 @ 女 


图 8.8 practice8_3. html 页 面 运 行 效果 


8.4 input 标记 一 一 按钮 


在 网 页 的 表单 中 ,按钮 起 到 至 关 重 要 的 作用 。 如 果 没 有 按钮 ,那么 网 页 很 难 和 用 户 进行 
互动 。 单 击 按钮 可 以 激发 提交 表单 的 动作 (“提交 ”按钮 ) ,也 可 以 将 表单 恢复 到 初始 的 状态 
(“ 重 置 "按钮 ) ,还 可 以 根据 程序 的 要 求 ,发 挥 其 他 的 作用 (普通 按钮 ) 。 

B841 核心 知识 


1. 普通 按钮 
普通 按钮 主要 是 配合 脚本 语言 (JavaScript) 来 进行 表单 的 处 理 , 语 法 格式 如 下 : 


<input type= "button" value= "按钮 的 值 " name= "按钮 的 名 称 "/> 


其 中 ,value 的 取 值 就 是 显示 在 按钮 上 的 文字 ,在 普通 按钮 中 可 以 添加 onclick、onfocus 等 


JavaScript 事件 实现 特定 的 功能 。 
2 “ 重 置 "按钮 
当 用 户 在 表单 中 输入 信息 后 , 想 清除 输入 的 信息 ,将 表单 恢复 成 初始 状态 时 ,需要 使 用 
“ 重 置 "按钮 ,语法 格式 如 下 : 
<input type= "reset" value= "按钮 的 值 " name= "按钮 的 名 称 "/> 
其 中 ,value 的 取 值 就 是 显示 在 按钮 上 的 文字 。 
3.“ 提 交 ” 按 钮 
用 户 单 击 “ 提 交 ” 按 钮 时 ,可 以 实现 表单 内 容 的 提交 ,语法 如 下 : 
<input type= "submit" value= "按钮 的 值 " name= "按钮 的 名 称 "/> 
其 中 ,value 的 取 值 就 是 显示 在 按钮 上 的 文字 。 
B42 能 力 目标 


能 使 用 input 标记 创建 普通 按钮 “ 重 置 ”按钮 以 及 “提交 ”按钮 ,并 且 理 解 普通 按钮 “ 重 
置 ” 按 钮 以 及 “提交 ”按钮 的 使 用 方法 。 


843 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example8_4. html, 具 体 要 求 如 下 : 
。 网 页 中 有 3 个 按钮 ,类 型 分 别 是 "提交 ”按钮 “ 重 置 ”按钮 与 普通 按钮 ; 
。 页 面 运行 效果 如 图 8. 9 所 示 。 

宽 收 惹 天 | 攻 sxwmple8_4 htnl [ 


姓名 ， 
提交 ] [ 重重 ] [ 关闭 


图 8.9 example8_4. html 页 面 运行 效果 


2 任务 的 代码 模板 
将 下 列 example8_4. html 中 的 [代码 ] 蔡 换 为 HTML 代码 。 
example8_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>example8 4.html< /title> 

< /head> 

<body> 


<form action=""> 


人 SLCGSS 网 页 设计 教学 做 一 体 化 教程 
102 ， 
A 姓名 : <input type= "text" name= "userName"/><br> 

< ! 一 代码 1 创建 "提交 "按钮 --> 

<inpu 太 代码 ljvalue= "提交 "/> 

<! 一 代码 2 创建 " 重 置 "按钮 一 > 

<inpu 太 代码 2]value=" 重 置 "/> 

< 上 -代码 3 创建 普通 按钮 --> 

<inpu 丰 代码 3jvalue= "关闭 " onclick= "window.close () "/> 

</form> 

</body> 
</html> 


3. 任务 小 结 或 知识 扩展 

在 example8_4. html 页 面 中 输入 姓名 后 , 单 击 “ 提 交 ” 按 钮 时 ,把 页 面 的 表单 信息 提交 给 
表单 处 理 程序 ,这 时 I 下 浏览 器 的 地 址 栏 会 发 生变 化 ; 单 击 * 重 署 ? 按 钮 时 ,输入 的 姓名 被 清 
空 ,这 时 IE 浏览 器 的 地 址 栏 没有 任何 变化 ; 单 击 “ 关 闭 ? 按 钮 时 ,输入 的 姓名 不 被 清空 ,这 时 
IE 浏 览 器 的 地 址 栏 也 没有 任何 变化 ,但 通过 onclick 事件 弹出 一 个 关闭 窗口 提示 框 。 

4 代码 模板 的 参考 答案 

【代码 1 : type= "submit" 


【代码 3]: type= "reset" 
【代码 3]: type= "button" 


B44 实践 环节 


编写 一 个 网 页 practice8_4. html, 具 体 要 求 如 下 : 

。 网 页 中 表单 的 处 理 程序 是 页 面 本 身 ; 

。 表单 中 有 文本 框 、 密 码 框 . 单 选 按钮 . 复 选 框 以 及 3 种 按钮 (“提交 ”按钮 “ 重 轩 ”按钮 
与 普通 按钮 ) ; 

。 页 面 运行 效果 如 图 8. 10 所 示 。 


四 ] E; \HTWL 与 Css 网 页 设计 \ 第 8 章 表单 与 页 面 控件 \ch8\YebContent\practice8_4. htnl 


六 practice9_4.htnl 


是 否 接 受 调查 @ 是 O 否 
选择 您 喜欢 的 国家 ， 回 中 国 回 俄罗斯 口 美国 口 日 本 
[本 和 [本 ] LE 


8. 10 “practice8_4. html 页 面 运行 效果 


8.5 inpnut 标记 一 图像 域 、 隐 藏 域 以 及 文件 域 
B51 核心 知识 


1. 图 像 域 
我 们 在 制作 网 页 时 ,有 时 发 现 按钮 的 外 观 很 单调 ,甚至 感觉 按钮 破坏 了 整体 的 设计 。 这 


时 ,可 以 使 用 图 像 域 创建 和 网 页 整体 效果 一 致 的 图 像 “ 提 交 ” 按 钮 。 因 此 ,图 像 域 是 指 用 在 
“提交 ”按钮 位 置 的 图 像 ,使 得 该 图 像 具 有 “提交 ”按钮 的 功能 。 

<input type= "image" name= "图 像 域 的 名 称 " src= "图像 的 路 径 "/> 
其 中 ,图 像 的 路 径 可 以 是 绝对 路 径 , 也 可 以 是 相对 路 径 。 

2 隐藏 域 

隐藏 域 在 页 面 中 用 户 是 看 不 到 的 。 使 用 隐藏 域 的 目的 主要 是 收集 和 发 送信 息 , 以 便于 
被 表单 的 处 理 程序 所 使 用 。 提 交 表 单 时 ,隐藏 域 的 值 一 块 被 发 送 给 服务 器 端 。 在 表单 中 可 
以 根据 需要 使 用 任意 个 隐藏 域 ,语法 格式 如 下 : 


<input type= "hidden" name= "隐藏 域 的 名 称 " value= "隐藏 域 的 值 "/> 


3. 文件 域 

我 们 平时 在 网 站 上 经 常用 到 上 传 照片 或 文件 的 功能 。 上 传 文件 的 控件 就 是 文件 域 , 它 

是 由 一 个 文本 框 和 一 个 “浏览 ”按钮 组 成 的 。 用 户 上 传 文件 时 ,可 以 直接 在 文本 框 中 输 
入 要 上 传 文件 的 路 径 , 也 可 以 单 击 “ 浏 览 ” 按 钮 选择 文件 ,语法 格式 如 下 : 


<input type= "file" name=" 文 件 域 的 名 称 "/> 


使 用 文件 域 上 传 文件 时 ,一 定 别 忘记 设置 form 表单 信息 提交 的 编码 方式 为 enctype 一 
"multipart/form-data"。 如 下 面 的 代码 : 


<form action="" enctype= "multipart/form- data"> 
你 的 靓 照 : < input type= "file" name= "fileName"/> 


< /form> 
_ 你 的 靓 照 : GE 
上 述 代码 呈现 的 结果 如 图 8. 11 所 示 。 
图 8.11 文件 域 的 呈现 结果 
8Bse 能 力 目标 


能 使 用 input 标记 创建 图 像 域 .隐藏 域 以 及 文件 域 ,并 且 人 掌握 图 像 域 .隐藏 域 以 及 文件 
域 的 使 用 方法 。 


853 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example8_5. html, 具 体 要 求 如 下 : 

。 网 页 中 有 个 表单 ,表单 的 处 理 程序 是 页 面 本 身 ,表单 中 有 1 个 文件 域 .1 个 图 像 域 与 
1 个 隐藏 域 ; 

。 文件 域 的 名 称 为 myFile; 

。 图 像 域 的 名 称 为 pic, 地 址 设置 为 logon. PNG; 

。 隐藏 域 的 名 称 为 flag, 值 为 0; 

。 页 面 运行 效果 如 图 8. 12 所 示 。 


2 任务 的 代码 模板 
将 下 列 example8_5. html 中 的 [代码 替换 为 HTML 代码 。 


{p08 


(全 SGSS 网 页 设计 教学 做 一 体 化 教 各 


加 可 司 5 WMLScss 网 页 设计 \ 第 8 章 表单 与 页 而 控件 \ch3\hebContent\exanple6_ 5 htnl 
寅 收 让 天 | 古 sraple8_5 htnl | 
姓名 ， 
指纹 
登录 
LOGIN 


图 8. 12 example8_5. html 页 面 运行 效果 
example8_5. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example8 5.html< /title> 
< /head> 
<body> 
< 上 -代码 1 设置 form 表 单 信息 提交 的 编码 方式 为 maltipart/form- data--> 
<form action= "中 代码 1】> 
姓名 : < input type= "text" name= "userName"/><br> 
<!-- 代 码 2 创建 文件 域 --> 
指纹 : <input 【代码 2]name= "myFile"><br> 
<!-- 代 码 3 创建 图 片 域 --> 
<inpu 共 代码 3jname= "pic" src= "logon.PNG"/> 
< ! 一 代码 4 创建 隐藏 域 --> 
< inpu 共 代码 4]name= "flag" value= "0"/> 
< /form> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

一 个 程序 需要 处 理 多 个 表单 提交 的 请 求 时 ,一 般 情况 下 .需要 在 每 个 表单 中 添加 一 个 名 
称 相同 值 不 同 的 隐藏 域 , 处 理 程序 根据 隐藏 域 的 值 就 可 以 判断 是 哪个 表单 提交 的 请 求 。 

4 代码 模板 的 参考 答案 


【代码 1】: snctype= "multipart/form- data™ 
【代码 2】: type= "file" 

【代码 3]: type= "image" 

【代码 4]: type= "hidden" 


B854 实践 环节 


编写 一 个 网 页 practice8_5. html, 具 体 要 求 如 下 : 

。 网 页 中 表单 的 处 理 程序 是 页 面 本 身 ; 

。 表单 中 有 1 个 文件 域 .1 个 图 像 域 以 及 3 个 按钮 (类 型 分 别 是 “提交 ”按钮 “ 重 置 ” 按 
钮 ,普通 按钮 ) ; 


第 6 章 表单 二 页 而 于 》 


。 文件 域 的 名 称 为 yourFile; 

。 图 像 域 的 名 称 为 yourPic, 地 址 设置 为 logon. PNG; 

。 普通 按钮 具有 关闭 窗口 的 功能 ; 

。 页 面 运行 效果 如 图 8. 13 所 示 。 

了 [ 回 WUDSCSSRRRT 第 0 表单 与 页 而 控件 \chBWhebContent\practice8_5. hinl 


突 收 总 天 | 芒 practice8_5 htnl 


调查 表 


姓名 ， 
性 别 ，@ 男 O 女 


图 8. 13 practice8_5. html 页 面 运行 效果 


8.6 ”列表 与 文本 区 


B61 核心 知识 


1 下拉 列 表 

下 拉 列 表 在 正常 状态 下 只 显示 一 个 选项 , 单 击 下拉 按 钮 后 才 会 看 到 全 部 选项 ,语法 格式 
如 下 : 

< select name= "下 拉 列 表 的 名 称 "> 


<option value= "选项 值 1" selected> 选 项 1 显示 内 容 
<option value= "选项 值 2" > 选项 2 显示 内 容 


</select> 
其 中 ,选项 值 是 提交 给 服务 器 的 值 ,而 选项 显示 内 容 才 是 真正 在 页 面 中 要 显示 的 。selected 
表示 此 选项 在 默认 状态 下 是 选中 的 ,selected 在 下 拉 列 表 中 只 能 有 一 个 ,因为 一 个 下 拉 列 表 
中 只 能 有 一 个 选项 被 选中 。 如 下 面 的 代码 : 


< select name= "cities"> 


<option value= "beijing" selected> 北 京 北京 总 
<option value= "shanghai" > 上 海 
<option value="guangzhou" > 广州 Er 
<option value= "shenzhen" > 深圳 外 

</select> El 

图 8. 14 
上 述 代码 呈现 的 结果 如 图 8. 14 所 示 。 A 
现 结果 
2 滚动 列表 


滚动 列表 和 下 拉 列 表 的 实现 形式 是 一 样 的 ,只 是 外 观 上 不 太一 样 。 滚 动 列 表 在 页 面 中 
可 以 显示 多 条 信息 ,一 旦 超出 这 些 信 息 ,在 列表 右 侧 就 会 出 现 滚动 条 , 拖 动 滚动 条 就 可 以 看 
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到 所 有 的 选项 内 容 , 语 法 格式 如 下 : 


< select name= "滚动 列表 的 名 称 " size= "显示 的 项 数 " multiple> 
<option value= "选项 值 1" selected> 选 项 1 显示 内 容 
<option value= "选项 值 2" > 选项 2 显示 内 容 


</select> 


其 中 ,size 用 来 设 定 滚动 列表 在 页 面 中 最 多 显示 的 项 数 , 当 超出 这 个 值 时 就 会 出 现 滚动 条 。 
multiple 表示 滚动 列表 可 以 进行 多 项 选择 。 选 项 值 是 提交 给 服务 器 的 值 , 而 选项 显示 内 容 
才 是 真正 在 页 面 中 要 显示 的 。selected 表示 此 选项 在 默认 状态 下 是 选中 的 。 如 下 面 的 
代码 ; 
<select name= "cities" size= "2" multiple > 
<option value= "beijing" selected> 北 京 
<option value= "shanghai" selected> 上 海 


<option value= "guangzhou" > 广州 
<option value= "shenzhen" > 深圳 


</select> 
图 8.15 滚动 列表 呈 
上 述 代码 呈现 的 结果 如 图 8. 15 所 示 。 现 结果 
3. 文 本 区 


当 用 户 需要 输入 多 行文 本 时 ,就 应 该 使 用 文本 区 而 不 是 文本 框 了 。 文 本 区 和 其 他 表单 
控件 不 一 样 , 它 使 用 的 是 textarea 标记 而 不 是 input 标记 ,语法 格式 如 下 : 


<textarea name= "文本 区 的 名 称 " cols= " 列 数 " rows=" 行 数 ">< /textarea> 


其 中 ,cols 用 于 设 定 文本 区 的 列 数 ,也 就 是 其 宽度 ;rows 用 于 设 定 文本 区 的 行 数 ,也 就 是 高 
度 值 , 当 文本 区 的 内 容 超 出 这 一 范围 时 就 会 出 现 滚 动 条 。 


862 能 力 目 标 
理解 并 掌握 下 拉 列 表 、 滚 动 列表 以 及 文本 区 的 使 用 方法 。 


B63 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example8_6. html, 具 体 要求 如 下 : 

网 页 中 有 1 个 下 拉 列 表 、1 个 滚动 列表 以 及 1 个 文本 区 ; 

下 拉 列 表 的 名 称 为 college, 选 项 显示 内 容 有 “利比亚 国家 大 学 、 伊 朗 伊 斯 兰 大 学 、 叙 
利 亚 国际 大 学 、 美 国 与 叙利亚 联合 大 学 ”, 选 项 “美国 与 叙利亚 联合 大 学 "默认 被 
选中 ; 

滚动 列表 的 名 称 为 country ,显示 项 数 为 2, 选项 显示 内 容 有 “利比亚 、 伊 朗 、 叙 利 亚 、 
美国 ”, 选 项 “美国 ”与 “叙利亚 ”默认 被 选中 ; 

页 面 运行 效果 如 图 8. 16 所 示 。 
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选择 你 的 大 学 ， [美国 与 轰 利 亚 联合 大 学 国 


选择 你 喜欢 的 国家 ， 
请 慎重 先 


择 ! 


备注 ， 


图 8.16 example8_6. html 页 面 运行 效果 


2 任务 的 代码 模板 


将 下 列 example8_6. html 中 的 [代码 ] 替 换 为 HTML 代码 。 
example8_6. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example8 6.html< /title> 
< /head> 
<body> 
选择 你 的 大 学 : 
<!-- 代 码 1 定义 下 拉 列 表 college --> 
【代码 1 
<option value="0"> 利 比 亚 国家 大 学 
<option value="1"> 伊 朗 伊 斯 兰 大 学 
<option value="2"> 叙 利 亚 国 际 大 学 
<option value= "3" selected> 美 国 与 叙利亚 联合 大 学 
</select> 
<br> 
选择 你 喜欢 的 国家 : 
<!-- 代 码 2 定义 滚动 列表 country, 滚 动 列 表 允 许多 选 ,显示 项 数 为 2 --> 
【代码 2] 
<option value= "a" selected> 叙 利 亚 
< option value= "b" selected> 美 国 
<option value= "c"> 伊 朗 
<option value="d"> 利 比 亚 
</select> 
<br> 
备注 : 
<! 一 代码 3 定义 文本 区 ,文本 区 的 行 数 为 10, 列 数 为 10 一 > 
【代码 习 请 慎重 选择 !< /textarea> 
</body> 
</html> 
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3 .任务 小 结 或 知识 扩展 
从 example8 _6. html 中 可 以 看 出 文本 区 中 的 默认 内 容 是 写 在 二 textarea 二 与 
去 /textarea 一 标记 之 间 的 。 当 文本 区 中 的 内 容 超 出 了 文本 区 行 数 的 大 小 时 ,在 文本 区 右 侧 
会 出 现 滚动 条 。 
在 下 拉 列 表 中 使 用 selected 把 多 个 选项 选中 , 仅 有 最 后 一 个 使 用 selected 的 选项 被 选 
中 。 因 为 下 拉 列 表 只 能 选中 一 个 选项 。 


4 代码 模 板 的 参考 答案 


【代码 1 : < select name= "college"> 
【代码 2]: < select name= "country" size= "2" multiple> 
【代码 3 : < textarea rows="10" cols="10"> 


864 实践 环节 
把 example8_6. html 中 的 代码 : 


<select name= "college"> 

<option value="0" > 利比亚 国家 大 学 

<option value="l" > 伊朗 伊斯兰 大 学 

<option value= "2" > 叙利亚 国际 大 学 

<option value= "3" selected> 美 国 与 叙利亚 联合 大 学 
</select> 


改 成 如 下 代码 : 


<select name= "college"> 
<option value="0" selected> 利 比 亚 国 家 大 学 
<option value= "l" selected> 伊 朗 伊斯兰 大 学 
<option value= "2" selected> 人 叙利亚 国际 大 学 
<option value= "3" selected> 美 国 与 叙利亚 联合 大 学 


</select> 


保存 代码 后 ,再 运行 example8_6. html 页 面 ,查看 下 拉 列 表 中 哪个 选项 被 选中 。 
8.7 小 结 


网 页 中 的 表单 是 由 form 标记 定义 的 ,二 form 二 标记 里 的 action 属性 是 必 不 可 少 的 , 它 
指定 了 表单 的 处 理 程序 。 表 单 提交 方法 有 get 和 post。get 方法 将 表单 内 容 以 附件 形式 放 
在 URL 地 址 后 面 ,不 安全 ;post 方法 将 用 户 在 表单 中 输入 的 数据 包含 在 表单 主体 中 ,一 起 
提交 给 服务 器 ,该 方法 没有 信息 长 度 的 限制 .也 比较 安全 。 

表单 对 象 input 通过 type 属性 指定 表单 对 象 的 类 型 ,如 type 的 值 为 text 时 ,input 表单 
对 象 代表 的 是 文本 框 类 型 。 

下 拉 列 表 、 滚 动 列表 以 及 文本 区 等 控件 不 是 通过 input 表单 对 象 定义 的 。select 标记 定 
义 下 拉 列 表 与 滚动 列表 控件 ,textarea 标记 定义 文本 区 控件 。 


习 题 8 
. 下 列 哪 一 项 表示 的 不 是 按钮 ( y 
A. type= "submit" B. type= "reset" 
C. type="image" D. type= "button" 


. 若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ,以 下 方法 中 ,正确 的 是 ( ) 。 


A. 二 input type= "text" rows="4" cols="30" name= "txtintrol"> 
B. 所 textarea rows="4" cols="30" name= "txtintro"> 
C. <textarea rows="4" cols="30" name= "txtintro">< /textarea> 


D. =textarea rows="30" cols="4" name= "txtintro"></textarea> 


. 用 于 设置 文本 框 显 示 宽 度 的 属性 是 ( ”)。 


A. size B. maxlength C. value D. length 


. 下面 对 表单 的 说 法 错误 的 是 ( ys 


A. 表单 在 Web 页 面 中 用 来 给 访问 者 填写 信息 ,从 而 能 采集 客户 端 信息 ,使 页 面具 
有 交互 信息 的 功能 

B， 当 用 户 填 写 完 信息 后 单 击 普通 按钮 做 提交 (submit) 操 作 

C. 一 个 表单 用 一 form 二 二 /form 二 标志 来 创建 

D. action 属性 的 值 是 指 处 理 程序 的 程序 名 (包括 网 络 路 径 、 网 址 或 相对 路 径 ) 


. 下面 说 法 错误 的 是 ( 》5 


A. 在 html 语言 中 ,标记 <input 之 具有 重要 的 地 位 , 它 能 够 将 浏览 器 中 的 控件 加 载 
到 html 文档 中 ,该 标记 既 有 开始 标记 ,又 有 结束 标记 

B. 过 input type 一 "text" 二 是 设 定 一 个 单行 的 文本 输入 区 域 

C. size 属性 指定 控件 宽度 ,表示 该 文本 输入 框 所 能 显示 的 最 大 字符 数 

D. maxlength 属性 表示 该 文本 输入 框 允 许 用 户 输 入 的 最 大 字符 数 


， 下面 对 于 按钮 的 说 法 中 正确 的 是 ( 和 


A， 按钮 可 分 为 普通 按钮 “提交 ?按钮 和 * 重 置 按 钮 

B. 一 input type 王 "button" 二 表示 这 是 个 提交 到 服务 器 的 按钮 
C. 二 input type 二 "RESET" 放 表示 这 是 个 普通 按钮 

D. name 属性 用 来 指定 按钮 页 面 显示 的 名 称 


. 下 面 说 法 中 错误 的 是 ( ) 。 


A. 一 input type 一 "checkbox "checked> ,其 中 checked 属性 用 来 设置 该 复 选 框 缺 
省 时 是 否 被 选中 

B. 过 input type 一 "hidden" 盖 表示 一 个 隐藏 区域。 用 户 可 以 在 其 中 输入 某 些 要 传送 
的 信息 

C. 二 input type 二 "password" 放 表示 这 是 个 密码 区 域 。 当 用 户 输入 密码 时 ,区 域内 
将 会 显示 “* ”号 

D. 二 input type 二 "radio" 记 表示 这 是 一 个 单 选 按钮 
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8. 下 列 说 法 中 错误 的 是 ( D's 
A. 二 select 这 过 /select 记 标志 对 用 来 创建 一 个 菜单 下 拉 列 表 框 
B. 下 拉 列 表 框 中 multiple 属性 不 用 赋值 ,直接 加 入 标志 中 即 可 使 用 ,加 入 了 此 属性 
后 列表 框 就 成 了 可 多 选 的 了 
C. 过 option> 标 志 用 来 指定 列表 框 中 的 一 个 选项 
D. 不 可 以 设 定 输入 多 行 的 文本 区 的 大 小 
9. 编写 1 个 网 页 习题 8-9. html, 具 体 要 求 如 下 : 
。 在 习题 8-9. html 网 页 中 有 个 form 表单 ,表单 处 理 程序 为 本 页 面 程序 ,表单 提交 
方式 为 “post”, 表 单 提交 编码 方式 为 “multipart/form-data”; 
。 页 面 运行 效果 如 图 8. 17 所 示 。 
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突 收 训 天 。 萎 习 二 8-9. Mnl | 
调查 问卷 


姓名 

性 别 @ 男 O 女 

所 在 地 ”| 利比亚 国 

喜欢 的 歌手 回 王菲 回 风 姐 口 芙蓉 哥哥 口 大 连 一 哥 
[| Ee | 


你 的 靓 昭 


个 人 描述 


图 8.17 习题 8-9. html 页 面 运行 效果 


框架 与 浮动 窗口 


我 们 在 浏览 网 站 时 ,经 常 通过 网 站 的 导航 栏 浏览 网 站 中 具体 的 网 页 内 容 , 这 些 具 体 的 网 
页 内 容 通常 在 一 个 浏览 器 窗口 中 显示 。 这 实际 上 是 利用 了 框架 技术 制作 了 网 站 的 导航 栏 。 
框架 通常 是 由 框架 集 和 框架 组 成 的 。 框 架 集 就 像 一 个 容器 ,包括 了 框架 ,框架 在 框架 集中 是 
一 个 独立 的 区 域 块 ,用 于 独立 显示 一 个 网 页 内 容 。 


9.1 框架 集 与 框架 


框架 最 大 的 用 途 就 是 导航 ,一 组 框架 通常 包括 一 个 含有 导航 栏 的 框架 和 男 一 个 显示 网 
页 内 容 的 框架 。 


量 1.1 核心 知识 
框架 页 面 的 结构 在 框架 集中 设置 ,包括 水 平分 割 窗 口 .垂直 分 割 窗 口 和 柑 套 分 割 
窗口 。 


1 水 平分 割 窗口 

水 平分 割 窗口 就 是 将 页 面 按照 水 平方 向 切割 成 上 下 排列 的 多 个 窗口 。 与 将 一 个 表格 分 
成 几 行 类 似 ,语法 格式 如 下 

< frameset rows= "frame 窗口 1 高度, frame 窗口 2 高 度 ,..."> 


<frame src= "页面 文件 1 地 址 "/> 
<frame src= "页 面 文件 2 地 址 "/> 


</frameset> 


其 中 ,rows 可 以 取 多 个 值 , 多 个 值 之 间 用 逗号 分 开 , 这 些 值 可 以 是 像素 ,也 可 以 是 百分比 。 
例如 ,下 面 的 整个 窗口 被 水 平分 割 成 3 个 框架 窗口 。 
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frame 窗口 1 
frame 窗口 2 


frame 窗口 3 


2 垂直 分 割 窗口 

垂直 分 割 窗口 就 是 将 页 面 按照 垂直 方向 切割 成 左右 排列 的 多 个 窗口 。 与 将 一 个 表格 分 
成 几 列 相似 ,语法 格式 如 下 : 

< frameset cols= "frame 窗口 1 宽度 ， frame 窗口 2 宽度 ，.…"> 


<frame src= "页 面 文件 1 地 址 "/> 
<frame src=" 页 面 文件 2 地 址 "/> 


< /frameset> 


其 中 ,cols 可 以 取 多 个 值 ,多 个 值 之 间 用 逗号 分 开 , 这 些 值 可 以 是 像素 ,也 可 以 是 百分比 。 例 
如 ,下 面 的 整个 窗口 被 垂直 分 割 成 4 个 框架 窗口 。 


frame 窗口 1 frame 窗口 2 frame 窗口 3 frame 窗口 4 


3. 其 套 分 割 窗口 
崔 套 分 窗口 就 是 页 面 中 既 有 水 平分 制 的 窗口 ,又 有 重 直 分 制 的 窗口 。 类 似 于 将 一 个 
表格 分 成 几 行 几 列 ,语法 格式 如 下 : 
<frameset rows= "frame 窗口 1 高 度 ，frame 窗口 2 高 度 ，..."> 
<frame src= "页 面 文件 1 地 址 "/> 
< frameset cols= "frame 窗口 1 宽度，frame 窗口 2 宽度 ，.."> 


<frame src= "页 面 文件 2 地 址 "/> 
<frame src= "页 面 文件 3 地 址 "/> 


</frameset> 


</frameset> 


嵌 套 分 割 窗口 是 框架 中 最 常见 的 一 种 方式 ,因为 它 可 以 很 灵活 地 将 窗口 页 面 任意 分 割 。 


例如 ,下 面 的 整个 窗口 首先 被 水 平分 割 成 3 个 框架 窗口 ,然后 中 间 的 窗口 又 被 垂直 分 割 成 
2 个 框架 窗口 。 
top 
left right 
bottom 
4 框架 集 的 属性 


我 们 可 以 通过 frameborder 让 框架 结构 的 边框 显示 或 隐藏 ,也 可 以 通过 framespacing 
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属性 调整 框架 结构 边框 的 线条 粗细 ,还 可 以 通过 bordercolor 设置 框架 结构 边框 的 颜色 , 语 
法 格式 如 下 : 


< frameset frameborder- "是否 显 示 " framespacing= "边框 宽度 " bordercolor= "边框 颜色 "> 


< /frameset> 


其 中 ,frameborder 的 值 可 以 为 0、1 或 yes .no。 如 果 为 0 或 no, 那 么 边框 隐藏 ;如 果 为 1 或 
yes, 那 么 边框 显示 。 在 frameset 中 设置 的 frameborder 将 会 对 整个 框架 集 有 效 ,而 frame 
中 设置 的 frameborder 只 对 该 框架 有 效 。framespacing 的 值 默认 情况 下 为 1 像素 ,该 属性 只 
能 对 框架 集 设置 ,对 单个 框架 无 效 。bordercolor 属性 也 只 能 对 框架 集 设置 ,对 单个 框架 
无 效 。 

5 框架 的 属性 

每 个 框架 窗口 都 可 以 通过 一 些 属性 设置 自己 的 样式 ,语法 格式 如 下 : 

<frame src=- "框架 页 面 地 址 " name= "框架 名 称 " marginwidth= "水 平 边 距 " 

scrolling= "是 否 显示 滚动 条 " marginheight= "年 直 边 距 " noresize/> 

每 个 框架 窗口 都 有 一 个 显示 页 面 , 该 页 面 称 为 框架 页 面 。 框 架 页 面 的 地 址 可 以 是 绝对 
地 址 ,也 可 以 是 相对 地 址 ,还 可 以 是 锚 点 链接 的 地 址 。 为 了 便于 页 面 的 查找 和 链接 ,利用 
name 属性 为 每 个 框架 命名 。 框 架 窗 口 在 默认 情况 下 ,会 在 右 侧 或 下 方 显 示 滚 动 条 ,可 以 通 
过 scrolling 属性 改变 。scrolling 取 值 包括 yes no 或 auto, 其 中 ,yes 表示 滚动 条 一 直 显 示 ， 
no 表示 滚动 条 一 直 不 显示 ,auto 是 系统 的 默认 值 , 根 据 内 容 自动 调整 (内 容 超出 时 就 显示 滚 
动 条 ) 。noresize 属性 是 让 框架 窗口 的 大 小 保持 不 变 。 


9312 能 力 目 标 
理解 并 掌握 框架 集 与 框架 的 创建 方法 以 及 如 何 使 用 它们 的 属性 设置 不 同 的 样式 。 


Q13 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example9_1. html, 具 体 要 求 如 下 : 

。 页 面 中 有 个 框架 集 , 框 架 集 把 整个 页 面 分 割 成 上 、 下 两 部 分 ,上 部 分 高 度 为 200 像 
素 ,整个 框架 集 不 带 滚动 条 ; 

上 面 框架 的 地 址 是 top. html; 

下 面 框架 里 面 又 嵌 套 一 个 框架 集 ,框架 集 把 下 面 框架 按 垂直 分 割 成 左 、 右 两 部 分 , 左 
部 分 宽度 为 200 像素 ,整个 框架 集 不 带 滚动 条 ; 

左 侧 框架 的 地 址 是 left. html, 右 侧 框 架 的 地 址 是 right. html; 

所 有 框架 不 允许 调整 其 大 小 ,网 页 运行 效果 如 图 9. 1 所 示 。 


2 任务 的 代码 模板 
将 下 列 example9_1. html 中 的 [代码 替换 为 HTML 代码 。 
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和 购 票 网 站 瘫 疾 垄断 才 是 “ 真 四 ” 

视频 12306 火 车 订 票 网 站 在 1 月 9 日 的 点 击 量 超过 了 14 亿 。 据 悉 ， 目 前 主 党 铁路 网 

银行 上 售票 业 务 的 是 铁道 部 下 属 企业 ， 属 于 革 断 行业 国企 ， 有 人 称 "肥水 不 流 外 人 田 " 
(1 月 10 晶 《第 一 财经 日 报 》) 。 另 外 ， 据 报 该 网 站 已 烧 导数 千 万 ， 却 频 现 瘫 放 、 
雇 涡 等 现象 《1 月 10 日 《21 世 纪 经 济 根 道 >》 ) 。 


点 击 次 数 从 日 均 10 亿 迅速 攀升 到 14 亿 , 似乎 都 是 “人 多 范 的 祸 。 不过, 当 我 们 
了 解 到 车 票 这 一 目前 最 稍 缺 的 公共 资源 被 独家 董 断 经 营 时 ， 就 会 认识 到 不 仅 是 “人 
多 着 的 祸 "， 还 有 “ 堂 断 车 的 祸 " 。 


图 9.1 example9_1. html 运行 效果 


example9_1. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>example9 1.html< /title> 


< /head> 
<!-- 代 码 1 定义 框架 集 , 把 页 面 按 水 平分 割 成 上 .下 两 部 分 ,上 部 分 高 度 为 200, 框 架 集 没有 边框 --> 
【代码 1 
<!-- 代 码 2 定义 框架 ,框架 地 址 是 top.html, 框 架 没 有 滚动 条 ,不 允许 调整 大 小 --> 
【代码 2] 
<!-- 代 码 3 定义 框架 集 ,把 页 面 按 垂直 分 割 成 左 、 右 两 部 分 , 左 部 分 宽度 为 200, 框 架 集 没有 边框 --> 
【代码 3] 


<frame src= "left.html" scrolling= "no" noresize> 
< frame src= "right.html" scrolling= "no" noresize> 
< /frameset> 
< /frameset> 
</html> 


top. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>top.html< /title> 

</head> 

<body> 


EE 


ns 


< embed src= "top.swf" width= "800" type= "application/x- shockwave- flash" > 
< /embed> 

< /body> 

</html> 


left. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> left.html< /title> 
< /head> 
<body bgcolor= "PaleTurquoise"> 
<table> 
<tr> 
<td> 新 闻 < /td> 
</tr> 
<tr> 
<td> 军 事 </td> 
</tr> 
<tr> 
<td> 视 频 < /td> 
</tr> 
<tr> 
<td> 银 行 < /td> 
</tr> 
< /table> 
< /body> 
</html> 


right. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>right.html< /title> 
< /head> 
<body bgcolor= "Pink"> 
<h2> 购 票 网 站 瘫痪 垄断 才 是 “ 真 凶 ”< /h2> 
<p>12306 火 车 订 票 网 站 在 1 月 9 日 的 点 击 量 超过 了 14 亿 。 据 悉 ,目前 主 营 铁 路 网 上 售票 业务 
的 是 铁道 部 下 属 企业 ,属于 垄断 行业 国企 ,有 人 称 “ 肥 水 不 流 外 人 田 ”(1 月 10 日 (第 一 财经 日 
报 ))。 另 外 , 据 报 该 网 站 已 烧 钱 数 千 万 , 却 频 现 瘫痪 、 崩 溃 等 现象 (1 月 10 日 (21 世纪 经 济 报 
道 》)。 
<p> 点 击 次 数 从 日 均 10 亿 迅速 攀升 到 14 亿 ,似乎 都 是 “人 多 车 的 祸 ”"。 不 过 , 当 我 们 了 解 到 车 票 
这 一 目前 最 稀缺 的 公共 资源 被 独家 垄断 经 营 时 ,就 会 认识 到 不 仅 是 “人 多 惹 的 祸 ”, 还 有 “ 芍 
断 营 的 祸 ”。 
< /body> 
</html> 
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3. 任务 小 结 或 知识 扩展 

从 example9_1. html 的 代码 中 ,我 们 怎么 没有 看 到 body 标记 呢 ? 框架 在 框架 集中 是 一 
个 独立 的 区 域 块 ,用 于 独立 显示 一 个 网 页 内 容 。 因 此 ,框架 不 需要 放 在 body 标记 里 面 ,也 
就 是 说 框架 页 面 里 面 是 不 含有 body 标记 的 。 

4 代码 模板 的 参考 答案 


【代码 1]: < frameset rows= "200, * " frameborder= "0"> 
【代码 3] : < frame src= "top.html" scrolling= "no" noresize> 
【代码 习 : < frameset cols= "200, * " frameborder= "0" > 


9Q14 实践 环节 


在 example9_1. html 中 的 二 /head 二 后 面 加 上 二 body 二 ,在 example9_1. html 中 的 
二 /html 过 前面 加 上 二 /body 二 ,保存 代码 后 运行 example9_1. html 页 面 ,查看 运行 结果 。 


9.2 浮动 框架 
浮动 框架 是 一 类 很 特别 的 框架 , 它 是 在 浏览 器 窗口 中 嵌 套 的 一 个 子 窗口 ,整个 页 面 不 一 
定 是 框架 页 面 ,但 包含 一 个 框架 窗口 。 另 外 ,浮动 框架 不 需要 在 框架 集中 。 
92.1 核心 知识 


浮动 框架 到 iframe 之 完全 由 程序 设计 者 定义 宽度 和 高 度 , 并 且 可 以 放置 在 网 页 的 任何 
位 置 ,这样 极 大 地 拓展 了 框架 页 面 的 应 用 范围 ,语法 格式 如 下 : 


<iframe src= "浮动 页 面 地 址 " width= "浮动 框架 的 宽 " height= "浮动 框架 的 高 " 
align= "对 齐 方式 " name= "浮动 框架 的 名 称 " scrolling= "是 否 显示 滚动 条 " 
frameborder= "是 否 显示 边框 "> 

< /iframe> 


其 中 ,一 些 属性 和 前 面 学 习 过 的 框架 集 与 框架 的 属性 类 似 ,这 里 不 再 解释 。 
922 能 力 目标 
理解 并 掌握 浮动 框架 的 创建 方法 以 及 如 何 使 用 它 的 属性 设置 不 同 的 样式 。 


923 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example9_2. html, 具 体 要 求 如 下 : 

。 在 example9_2. html 页 面 中 有 个 二 h2 二 级 别 的 标题 “浮动 框架 的 学 习 ”, 在 标题 的 下 
方 有 个 表格 ,该 表格 分 3 行 ,第 1 行 第 1 列 里面 放 置 的 是 一 个 浮动 框架 ; 

。 浮动 页 面 的 地 址 是 leftiframe. html; 

。 网 页 运行 效果 如 图 9. 2 所 示 。 
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{pm 


rm en en he [|x| 
突 收 评 天 | 姜 xwnle 2 hl 
浮动 框架 的 学 习 
猪八戒 花 千 万 捍 喜 酒 迎娶 白骨 精 
从 
站 内 公告 铬 堪 骨 本 四 戏 生 情态 情 大 加 
下 请 看 右 侧 的 八 封 新 
1 

孙悟空 化 身 摩 登 天 后 不 拒 姐 弟 恋 


图 9.2 example9_2. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example9_2. html 中 的 [代码 替换 为 HTML 代码 。 
example9_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example9 2.html< /title> 
< /head> 
<body> 
<h2 align= "center"> 浮 动 框架 的 学 习 < /h2> 
<table> 
过 
<td rowspan= "3"> 
< ! 一 代码 1 定义 浮动 页 面 的 地 址 为 leftiframe.html--> 
< ! 一 代码 2 设置 浮动 框架 的 宽度 和 高 度 都 为 200 --> 
<iframe【 代 码 1 代码 2 
align= "left" name= "left" scrolling= "no" frameborder= "no"> 
</iframe> 
</td> 
<td> 
猪八戒 花 千 万 摆 喜 酒 迎 亡 白骨精 
</td> 
</tr> 
过 让 
<td> 
猪八戒 白骨 精 因 戏 生 情 恋情 大 回顾 
</td> 
</tr> 
<tr> 
<td> 
孙悟空 化 身 摩登 天 后 不 拒 姐 弟 恋 
</td> 
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</table> 
< /body> 
</html> 


leftiframe. html 


< IDOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> leftiframe.html< /title> 
< /head> 
<body bgcolor= "PaleTurquoise"> 
<marquee direction= "up" behavior= "alternate" scrolldelay= "300"> 
<h2 align= "center"> 站 内 公告 </h2> 
<p> ”请 看 右 侧 的 八卦 新 闻 ! 
< /marquee> 
< /body> 
</htm> 


3. 任务 小 结 或 知识 扩展 

iframe 也 是 框架 的 一 种 形式 ,相当 于 在 主 浏览 器 窗口 内 嵌 一 个 子 窗口 ,内 容 自 动 打 开 。 
iframe 可 以 嵌 在 网 页 中 的 任意 部 分 ,也 可 以 随意 定义 其 大 小 。iframe 可 以 解决 加 载 缓慢 的 
第 三 方 内 容 ( 如 图 标 和 广告 等 ) 的 加 载 问题 。 

4 代码 模板 的 参考 答案 


【代码 1】: src= "Leftiframe.html" 
【代码 3]: width= "200" height= "200" 


924 实践 环节 


在 网 页 example9_2. html 中 的 表格 的 最 后 一 个 单元 格 里 面 添加 一 个 浮动 框架 ,浮动 页 
面 由 读者 自己 定义 。 


9.3 框架 链接 


框架 链接 与 普通 的 链接 有 所 不 同 。 在 框架 链接 中 可 以 指定 打开 窗口 的 位 置 ,从 而 实现 
在 一 个 框架 区 域 中 ,通过 链接 控制 另 一 个 框架 区 域 的 显示 内 容 。 


931 核心 知识 


1. 普通 框架 (frame) 结 构 的 链接 

一 般 情况 下 ,一 个 页 面 中 会 有 一 个 框架 窗口 作为 导航 页 面 ,在 导航 页 面 里 面 添加 了 对 另 
一 个 框架 内 容 的 链接 。 它 们 通过 target 互相 链接 。 下 面 通过 一 个 实例 来 说 明 。 

下 面 是 框架 集中 的 代码 段 : 


第 9 章 


< frameset rows= "200, * "> 
<frame src= "top.html" name= "top"/> 
<frameset cols="300, * "> 
<frame src= "left.html" name= "left"/> 
< frame src= "right.html " name= "right"/> 
< /frameset> 
< /frameset> 


下 面 是 top 框架 中 的 内 容 作为 页 面 的 导航 页 ,代码 段 如 下 : 
<a href= "sportnews .html " target="right"> 体 育 新 闻 < /a> 


在 该 实例 中 ,我 们 可 以 看 到 每 个 框架 frame 都 有 一 个 属性 name, 这 个 name 要 和 导航 页 
面 中 超 链接 的 target 一 致 ,如 该 实例 中 的 right。 当 我 们 单 击 * 体 育 新 闻 ” 这 个 超 链接 时 ,就 
会 把 sportnews. html 页 面 的 内 容 显示 在 right 框架 中 ,也 就 是 说 在 right. html 页 面 显示 的 
位 置 处 显示 sportnews. html 页 面 的 内 容 。name 的 值 是 一 个 标识 符 , 可 以 根据 需要 随便 定 
义 , 但 要 和 链接 中 的 target 值 相同 ,才能 实现 框架 链接 。 


2 浮动 框架 的 链接 
浮动 框架 的 链接 和 普通 框架 的 链接 类 似 。 下 面 通过 一 个 实例 来 说 明 。 
实例 代码 段 如 下 : 


< iframe src= "myiframe.html " width="500" height= "200" name= "Iframe" >< /iframe> 


<a href="youriframe.html " target="Iframe"> 企 业 简介 < /a> 


在 该 实例 中 ,我 们 可 以 看 到 浮动 框架 iframe 有 一 个 属性 name, 这 个 name 要 和 超 链接 
的 target 一 致 ,如 该 实例 中 的 Iframe。 当 我 们 单 击 * 企 业 简介 ”这 个 超 链 接 时 ,就 会 把 
youriframe. html 页 面 的 内 容 显 示 在 浮动 框架 中 ,也 就 是 说 在 myiframe. html 页 面 显 示 的 位 
置 处 显示 youriframe. html 页 面 的 内 容 。name 的 值 是 一 个 标识 符 ,可 以 根据 需要 随便 定 
义 ,但 要 和 链接 中 的 target 值 相 同 .才能 实现 浮动 框架 链接 。 


Se 能力 目标 
理解 并 掌握 框架 链接 的 使 用 方法 。 
S33 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example9_3. html, 具 体 要 求 如 下 。 

。 将 example9_3. html 页 面 从 上 至 下 分 为 top、page、bottom 3 个 区 域 。page 是 页 面 
的 主要 内 容 , 在 page 中 将 页 面 分 为 左右 两 部 分 ,分 别 为 left、right。 各 部 分 的 布局 规 
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划 如 图 9. 3 所 示 。 

。 当 单 击 left 部 分 的 超 链接 时 ,会 把 响应 页 内 容 显 示 在 example9_3. html 页 面 的 
right 部 分 中 。 

。 top 框架 的 页 面 地 址 是 topFrame. html,left 框架 的 页 面 地 址 是 leftFrame. html,right 框 
架 的 页 面 地 址 是 rightFrame. html,bottom 框架 的 页 面 地 址 是 bottomFrame. html。 


回回 -tvscssaniait ee tee 与 5 动 D\deWetcontent\ererlee 3 hl 国 [4+ [x | [PD vice [P| 
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次 收藏 天。 | 蔬 exanp1e9_3 htnl | 


猪八戒 的 个 人 网 站 
个 人 简介 
各 个 人 简介 
猪八戒 ， 法 号 悟 能 ， 是 唐僧 的 二 徒弟 ， 原 来 是 玉皇大帝 的 天 迁 元 籼 ， 因 调 
戏 寻 娥 被 逐 出 天 界 ， be 又 错 投 猪 胎 ， 嘴 脸 与 猪 相似。 他 会 变 身 木 ， 能 腾 云 加 去 ， 
栈 洞 ， 猪 服 ， 八 玻 从 此 成 为 孙 司 
空 的 好 帮手 ， 一 同 保护 | 下 性格 温和 ， 厚 厚 单纯 ， 力 气 大 ， 但 又 好 吃 懒 做 ， 
爱 占 小 便宜 ， 贪 图 女 色 ， 经 常 被 妖怪 的 美 色 所 迷 ， 难 分 敌我 。 他 对 师兄 的 话 言 听 计 从 ， 对 师父 
忠心 耿耿 ， 为 唐僧 西天 取经 立 下 汗马功劳 ， 是 个 被 人 们 喜爱 同情 的 喜剧 人 物 。 
八 式 性格 温 和， 区 厚 单 纯 ， 各 嘴巴 甜 。 但 好 吃 懒 做 ， 爱 占 小 便宜 ， 仙 图 女 色 ， 经 带 
从 戒 俩 吃食 睡 ， 自 私自 利 ， 好 进 旋 言 。 ee 


为 这 
空 的 督促 有 很 大 关系 ) ， 做 到 了 悬崖 勒 马 ， 其 至 是 浪子 回头 。 在 取经 事业 中 的 他 对 师兄 的 话 
人 对 师父 忠心 耿 耿 ， 总 算是 为 西天 取经 立 下 汗马功劳 ， 才 用 坛 使 者 的 美好 
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图 9.3 example9_3. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 example9_3. html 与 leftFrame. html 中 的 [代码 替换 为 HTML 代码 。 
example9_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>example9 3.html< /title> 
< /head> 
< frameset rows= "100, 400, * " frameborder= "0"> 
< frame src= "topFrame.html" scrolling= "no" name= "top" noresize> 
< frameset cols="100, * " frameborder= "0"> 
<frame src= "leftFrame.html" scrolling= "no" name= "left" noresize> 
<! 一 代码 1 定义 一 个 框架 ,框架 页 面 地 址 是 rightFrame.html, 框 架 名 称 为 right, 框 架 
不 允许 滚动 与 调整 大 小 一 > 
【代码 1 


</frameset> 
< frame src= "bottomFrame.html" scrolling= "no" name= "bottom" noresize> 
< /frameset> 
</htm> 


leftFrame. html 


< IDOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> leftFrame.html< /title> 
< /head> 
<body bgcolor= "PaleTurquoise"> 
<table> 
<tr> 
< ! 一 代码 2 定义 超 链接 ,链接 地 址 是 rightFrame.html, 链 接 页 面 显示 在 right 框架 中 一 > 
<td> 
【代码 2]style= "text- decoration:none"> 个 人 简介 < /a> 
</td> 
</tr> 
<tr> 
< !-- 代 码 3 定义 超 链接 ,链接 地 址 是 gerentedian.html, 链 接 页 面 显示 在 right 框架 中 一 > 
<td> 
【代码 3]style= "text- decoration:none"> 个 人 特点 </a> 
</td> 
< /tr> 
</table> 
</body> 
</html> 


topFrame. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>topFrame.html< /title> 
< /head> 
<body bgcolor= "Wheat"> 
<br><br> 
<center>< font size=6 face= 华 文 新 魏 > 猪 八 戒 的 个 人 网 站 < /font>< /center> 
</body> 
</html> 


rightFrame. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title> rightFrame.html< /title> 
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</head> 
<body bgcolor= "Pink"> 
<h2 align= "center"> 个 人 简介 < /h2> 
<br> 
<table> 
<tr> 
<td><p> 猪 八 戒 ,西游 记 中 人 物 。 法 号 悟 能 ,是 唐僧 的 二 徒弟 ,原来 是 玉皇大帝 的 天 蓬 
元 帅 , 因 调 戏 嫦 娥 被 逐 出 天 界 , 到 人 间 投 胎 , 却 又 错 投 猪 胎 , 嘴 脸 与 猪 相似 。 他 
会 变 身 术 , 能 腾 云 驾 雾 ,使 用 的 兵器 是 九 齿 钉 把 。 唐 僧 西 去 取经 路 过 云 栈 洞 ， 
猪八戒 被 孙悟空 收服 , 八 戒 从 此 成 为 孙悟空 的 好 帮手 ,一 同 保护 唐僧 去 西天 
取经 。 八 戒 性 格 温和 , 惑 厚 单纯 ,力气 大 ,但 又 好 吃 懒 做 , 爱 占 小 便宜 ,贪图 女 
色 , 经 常 被 妖怪 的 美 色 所 迷 , 难 分 敌我 。 他 对 师兄 的 话 言 听 计 从 ,对 师父 忠心 
耿耿 ,为 唐僧 西天 取经 立 下 汗马功劳 ,是 个 被 人 们 喜爱 同情 的 喜剧 人 物 。 
</td> 
< /tr> 
<tr> 
<td> 八 戒 性 格 温和 , 惑 厚 单纯 ,力气 大 ,嘴巴 甜 。 但 好 吃 懒 做 , 爱 占 小 便宜 ,贪图 女 色 ， 
经 常 被 妖怪 的 美 色 所 迷惑 , 难 分 敌我 。 猪 八 戒 贪 吃 贪 睡 ,自私 自 利 , 好 进 放言 。 他 
常常 想 捉弄 人 ,但 不 是 搬 起 石头 来 砸 自己 的 脚 就 是 作 草 自 缚 。 为 什么 连 这 样 一 个 
人 也 最 终 修成 正果 ,被 如 来 佛 封 为 “ 净 坛 使 者 "。 这 与 猪八戒 的 知 错 就 改 , 能 听取 
领导 和 同事 的 意见 有 重要 联系 (其 实 这 与 悟空 的 “督促 ' 有 很 大 关系 ), 做 到 了 悬崖 
勒 马 ,甚至 是 浪子 回头 。 在 取经 事业 中 的 他 对 师兄 的 话 还 算得 上 言 听 计 从 ,对 师 
父 忠心 耿耿 ,总 算是 为 西天 取经 立 下 汗马功劳 , 才 有 净 坛 使 者 的 美好 结果 吧 。 
</td> 
< /tr> 
</table> 
</body> 
</html> 


gerentedian. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title> gerentedian.html< /title> 

< /head> 

<body> 

<br> 贪 吃 

<pbr> 懒 做 

<br> 贪 睡 

<br> 心 宽 

<br> 体 胖 

<br> 好 色 

<br> 心 善 

<br> 忠 诚 

<br> 老 实 

<br> 胆 小 

< /body> 

</html> 
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bottomFrame. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>bottomFrame.html< /title> 


< /head> 

<body bgcolor= "Wheat"> 

<br> 

<center> 版 权 归 清 华 大 学 出 版 社 所 有 < /center> 
< /body> 

</html> 

3 任务 小 结 或 知识 扩展 


不 管 是 frame 框架 链接 还 是 iframe 浮动 框架 链接 ,都 要 注意 一 点 : 链接 的 target 属性 
值 和 框架 的 name 属性 值 必 须 一 致 。 


4 代码 模板 的 参考 答案 


【代码 1]: < frame src="rightFrame.html" scrolling= "no" name= "right" noresize> 
: <a href= "rightFrame. target= "right 

【代码 2] href= "ri htmln "right" 

【代码 3 : <a href= "gerentedian.html" target="right" 


Bad 实践 环节 


编写 一 个 网 页 practice9_3. html, 具 体 要 求 如 下 : 

。 在 practice9_3. html 页 面 中 首先 有 两 个 超 链 接 , 然 后 有 个 浮动 框架 ; 

。 当 单 击 链接 时 ,会 把 响应 的 网 页 内 容 显 示 在 practice9_3. html 页 面 的 浮动 框架 中 ; 
。 页 面 运行 效果 如 图 9. 4 所 示 。 


ES 图 5: NTmLScss 网 页 设计 \ 第 9 章 框架 与 浮动 窗口 \ch9 WebContent\practice9_3. html 图 
| 究 收 京 天 | 戎 practice3_3. htl 

天 气 预报 
体育 新 闻 


我 是 浮动 窗口 


9. 4 ”practice9_3. html 运行 效果 
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9.4 小 结 


frameset 创 框架 集 , 在 框架 集中 使 用 frame 创建 框架 窗口 ,框架 可 以 谤 套 男 一 个 框架 
集 。 框 架 在 框架 集中 是 一 个 独立 的 区 域 块 , 用 于 独立 显示 一 个 网 页 内 容 。 框 架 不 需要 放 在 
body 标记 里 面 ,也 就 是 说 框架 页 面 里 面 是 不 含有 body 标记 的 。 

浮动 框架 iframe 是 在 浏览 器 窗口 中 嵌 套 的 一 个 子 窗口 。 浮 动 框架 可 以 放 在 任意 位 置 ， 
也 可 以 任意 设置 窗口 大 小 。 浮 动 框架 主要 解决 加 载 缓慢 的 第 三 方 内 容 ( 如 图 标 和 广告 等 ) 的 
加 载 问题 。 


习 题 9 


1. 下 面 对 框 架 的 说 法 错误 的 是 ( Wa 
A. 框架 页 面 把 浏览 器 窗口 切割 成 几 个 独立 的 部 分 
B. 设计 框架 页 面 时 ,过 frame 之 标记 和 所 frameset 之 标记 用 于 定义 框架 网 页 的 结构 
C. 由 于 框架 网 页 的 出 现 , 从 根本 上 改变 了 HTML 文档 的 传统 结构 ,因此 在 出 现 
二 frameset 二 标记 的 文档 中 ,将 不 再 使 用 二 body 二 标记 
D. 二 frame 之 是 用 来 划分 窗 框 的 ,每 一 窗 框 由 一 个 二 frameset 之 标记 所 标示 ， 
去 frameset 二 必须 在 二 frame 之 范围 中 使 用 
2. 下 面 说 法 错误 的 是 ( )。 
A. 我 们 可 以 将 窗口 分 割 为 几 块 ,横向 分 用 rows 属性 ,纵向 分 用 cols 属性 
B. 框架 可 以 嵌 套 
C. 二 frameset cols 一 "* ,x* , * " 是 将 窗口 横向 分 为 三 等 分 
D. 二 frameset rows 一 "50% ,50%% "> 是 将 窗口 横向 分 为 2 个 ,各 占 50% 的 显示 
区 域 
3. 下 面 说 法 中 正确 的 是 ( 
A. 框架 的 各 个 窗口 间 不 可 以 相互 操作 
B. src 属性 应 该 出 现在 二 frameset 二 标记 中 
C. 二 a href 王 url target 二 _blank 记 的 作用 是 说 明 超 链 接 的 内 容 显示 一 个 新 窗口 
D. 一 a href 二 url target 一 right 过 的 作用 是 说 明 超 链接 的 内 容 显示 在 浏览 器 窗口 的 
右 侧 
4. 框架 与 浮动 框架 有 什么 区 别 ? 


av 


ript 


JavaScript 是 一 种 描述 性 的 脚本 语言 (Script Language) , 它 由 客户 端 浏览 器 解释 执行 ， 
执行 期 间 无 须 Web 服务 器 ,减轻 了 Web 服务 器 的 负担 。 


10.1 在 网 页 中 添加 JavaScript 的 方法 
核心 知识 
1. 风 入 使 用 


在 网 页 代码 中 任何 位 置 都 可 嵌入 JavaScript 代码 ,但 建议 嵌入 到 head 标记 中 。 示 例 代 
码 如 下 : 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> Javascript 罕 人 学 习 < /title> 
< script type= "text/javascript"> 
alert ("第 一 次 看 到 警告 框 很 兴奋 !") ; 
</script> 
< /head> 
<body> 
好 好 学 习 Javascript 知识 。 
< /body> 
</html> 
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2 引入 使 用 

当 多 个 页 面 使 用 相同 的 JavaScript 代码 时 ,可 以 将 共用 的 代码 保存 在 以 .js 为 扩展 名 的 
文件 中 ,然后 在 页 面 中 使 用 src 属性 引入 外 部 js 文件。 示例 代码 如 下 : 

myFirst. js 


alert ("被 引入 到 页 面 中 !"); 
JavaScript 引入 学 习 . html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> 引 入 外 部 js 文件 < /title> 
< Script type= "text/javascript" src= "myFirst.js" charset= "GBK"> 
</script> 
< /head> 
<body> 
好 好 学 习 Javascript 知识 。 
< /body> 
</html> 


1012 能 力 目标 
理解 并 掌握 在 网 页 中 使 用 JavaScript 的 方法 。 
1013 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example10_1. html, 在 网 页 中 嵌入 使 用 JavaScript 代码 连续 两 次 弹出 “How 
do you do7”。 

2 任务 的 代码 模板 

将 下 列 example10_1. html 中 的 [代码 替换 为 程序 代码 。 

examplel10_1. html 


< IDOCTYPE html PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 

<html> 

<head> 

<title>examplel0 1.html< /title> 

< !-- 嵌 人 Javascript, 使 用 alert 两 次 弹出 How do you do? --> 

【代码 1 

</head> 

<body> 
先 执行 head 里 面 的 Javascript, 然 后 执行 body 部 分 。 如 果 Javascript 程序 是 函数 的 话 , 只 有 函 
数 被 调用 时 , 才 执行 Javascript。 

</body> 

</html> 


3. 任务 小 结 或 知识 扩展 
当 浏 览 器 载 人 网 页 body 部 分 时 ,执行 写 在 二 body 二 ... 一 /body 二 里 的 JavaScript 语句 ， 
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执行 之 后 输出 的 内 容 就 显示 在 网 页 中 。 有 时 候 并 不 需要 一 载 人 HTML 就 运行 JavaScript， 一 
而 是 用 户 单 击 了 HTML 中 的 某 个 控件 对 象 ,触发 了 一 个 事件 后 , 才 需 要 调用 JavaScript。 
这 时 候 ,通常 将 这 样 的 JavaScript 放 在 HTML 的 一 head 二 .一 /head> 里 。 

将 JavaScript 代码 写 在 外 部 文件 中 ,可 以 提高 JavaScript 的 复 用 性 ,减少 代码 维护 的 负 
担 ,不 必 将 相同 的 JavaScript 代码 拷贝 到 多 个 HTML 网 页 里 ,将 来 一 旦 程序 有 所 修改 ,也 只 
要 修改 .js 文件 就 可 以 ,不 用 再 修改 每 个 用 到 这 个 JavaScript 程序 的 HTML 文件 。 


4 代码 模板 的 参考 答案 


【代码 1]: < script type= "text/javascript"> 
alert ("How do you do?"); 
alert ("How do you do?"); 

</script> 


1014 ”实践 环节 


把 example10_1. html 中 的 JavaScript 程序 写 在 外 部 的 JS 文件 里 ,然后 在 example10_ 
1. html 页 面 中 引用 该 JS 文件 。 


10.2 JavaScript 基本 语法 


JavaScript 区 分 大 小 写 ,变量 是 弱 类 型 (任意 变量 类 型 都 是 var 声明 ) 。 在 浏览 器 中 逐条 
解释 执行 ,如 果 某 条 语句 出 现 错误 ,后 面 的 语句 将 不 再 执行 。 


192.1 核心 知识 


1. 变量 
使 用 var 可 以 声明 任意 类 型 的 变量 ,如 : 


var firstNumber=10; 


2 类 型 转换 

JavaScript 是 弱 类 型 语言 ,变量 的 类 型 对 应 于 其 值 的 类 型 。 可 以 对 不 同类 型 的 变量 执 
行 运算 ,解释 器 强制 转换 数据 类 型 ,然后 进行 处 理 。 如 : 数值 与 字符 串 相 加 ,将 数值 强制 转 
换 为 字符 串 ;布尔 值 与 字符 串 相 加 ,将 布尔 值 强制 转换 为 字符 串 ;数值 与 布尔 值 相 加 ,将 布尔 
值 强制 转换 为 数值 。 

字符 串 到 数值 的 转换 。 如 : parseInt(s) 将 字符 串 转换 为 整数 ,parseFloat(s) 将 字符 串 
转换 为 浮 点 数 ,Number(s) 将 字符 串 转 换 为 数字 。parseInt 方法 和 parseFloat 方法 只 对 
string 类 型 有 效 , 且 需要 是 数字 开头 的 字符 串 。 

3. 运 算 符 

(1) 赋值 运算 符 

赋值 运算 符 的 运算 规则 及 说 明 如 表 10. 1 所 示 。 
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表 10.1 赋值 运算 符 


运算 符 示例 说 明 运算 符 示例 说 明 
i 天 一 7 把 变量 y 的 值 赋 给 x # 一 X=y; X=X* ys 
十 一 x 十 一 5 | x 一 x 十 7; /= x/=ys x=x/ys 

= X 一 y; X 一 X yy; 


(2) 数学 运算 符 
数学 运算 符 的 运算 规则 及 说 明 如 表 10. 2 所 示 。 


表 10.2 数学 运算 符 


运算 符 示 例 说 明 

A=5 十 8 ”// 结 果 是 13 如 果 操 作 数 都 是 数字 时 执行 加 法 运算 ,如 果 其 中 的 操 
A 二 "5" 十 8 // 结 果 是 "58"” ”| 作 数 有 字符 串 时 ,会 执行 连接 字符 串 的 运算 

一 A=8—5 减法 

关 A=8*5 乘法 

/ A==8/5// 结 果 是 1.6 除法 

% 10%3=1 取 余 
十 十 x 返回 递增 后 的 x 值 、 

本 和 x 十 十 返回 递增 前 的 x 值 i 
一 一 x 返回 递减 后 的 x 值 

x 一 一 返回 递减 前 的 x 值 | 地 

一 如 果 a 等 于 5, 则 一 a 二 一 5 此 运算 符 返 回 操作 数 的 相反 数 

(3) 逻辑 运算 符 


逻辑 运算 符 的 运算 规则 及 说 明 如 表 10. 3 所 示 。 
表 10.3 ， 远 辑 运算 符 


运算 符 示 例 说 明 
区 8 exprl &&. expr2 逻辑 与 (表达 式 1 错误 ,表达 式 2 不 再 运算 ) 
| exprl || expr2 ] 逻辑 或 (表达 式 1 正确 ,表达 式 2 不 再 运算 ) 
! lexpr 逻辑 非 


(4) typeof 运算 符 
对 变量 或 值 调 用 typeof 运算 符 将 返回 对 应 的 值 ,typeof 运算 符 的 运算 规则 及 说 明 如 
表 10.4 所 示 。 


表 10.4 typeof 运算 符 


示 例 返回 结果 说 明 
typeof(true) boolean 变量 或 值 是 boolean 类 型 
typeof(300) number 变量 或 值 是 number 类 型 
typeofCabc) string 变量 或 值 是 string 类 型 
typeofCnull) object 变量 或 值 是 一 种 引用 类 型 或 null 类 型 
typeof(f) function 变量 是 一 个 函数 
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1022 能 力 目标 


理解 并 掌握 JavaScript 变量 的 定义 与 使 用 ,掌握 运算 符 的 使 用 方法 ,能 灵活 使 用 类 型 
转换 。 


1023 任务 驱动 
1. 任 务 的 主要 内 容 
编写 网 页 example10_2. html, 在 网 页 中 嵌入 使 用 JavaScript,JavaScript 程序 的 具体 要 
求 如 下 : 


。 声明 变量 firstNumber, 并 把 "I am a String" 赋 值 给 该 变量 ; 

。 声明 变量 secondNumber, 并 把 300 赋值 给 该 变量 ; 

。 声明 变量 thirdNumber, 并 把 firstrNumber 十 secondNumber 赋值 给 该 变量 ; 

。 使 用 alert 弹出 变量 thirdNumber 的 值 ; 

。 使 用 typeof 运算 符 判 断 变量 firstrNumber、secondNumber 以 及 thirdNumber 的 值 类 
型 ,并 使 用 alert 分 别 弹出 typeof 的 返回 结果 。 


2 任务 的 代码 模板 
将 下 列 example10_2. html 中 的 [代码 替换 为 程序 代码 。 
examplel10_2. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplel0 2.html< /title> 
< script type= "text/javascript"> 
var firstNumber= "I am a String"; 
var secondNumber= 300; 
Var thirdNumber= firstNumber+ secondNumber; 
【代码 1]// 弹 出 变量 thirdNumber 的 值 
alert ("firstNumber 的 值 类 型 : "+【 代 码 2】); // 弹 出 变量 firstNumiber 的 值 类 型 
alert ("secondNumber 的 值 类 型 : "+【 代 码 引 );  // 弹 出 变量 secondNumber 的 值 类 型 
alert ("thirdNumber 的 值 类 型 : "+【 代 码 4) : 。“”// 弹 出 变量 thirdNumber 的 值 类 型 
</script> 
< /head> 
<body> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

(1) 注释 

为 了 程序 的 可 读 性 ,以 及 便于 日 后 代码 修改 和 维护 ,可 以 在 JavaScript 程序 里 为 代码 写 
注释 。 在 JavaScript 程序 里 ,用 “//” 来 表示 单行 注释 。 多 行 注释 用 “/ * ”表示 开始 ,“* /” 表 
示 结 束 。 注 释 示例 代码 如 下 : 


1 人 GASS 同 两 设计 教学 做 一 体 化 教程 
0 
~ aGoodIdea= "Comment your code thoroughly."; // 这 是 单行 注释 

/x* 

这 是 多 行 注释 行 一 。 

这 是 多 行 注释 行 二 。 

#/ 

(2) 变量 命名 规则 

以 字母 .下 夯 线 (_) 或 美元 符号 ($ ) 开 头 ; 余 下 的 字符 可 以 是 下 画 线 、 美 元 符号 或 任何 的 
字母 ,数字 ;不 能 有 空格 ,大 小 写 敏感 ;不 能 使 用 JavaScript 中 的 关键 字 或 保留 字 命 名 。 

(3) 部 分 保留 字 

break delete function ,return typeof case do,if switch ,var、catch else in this void、 


continue ,false ,instanceof .throw 、while ,finally ,new true、with default ,for .null\try 
4 代码 模板 的 参考 答案 


【代码 11: alert (thirdNumber); 
【代码 3]: typeof (firstNumber) 
【代码 3]: typeof (secondNumber) 
【代码 4] : typeof (thirdNumber) 


Ja24 : 实践 环节 


编写 网 页 practice10_2. html, 在 网 页 中 其 入 使 用 JavaScript,JavaScript 程序 的 具体 要 
求 如 下 : 

。 声明 变量 firstNumber, 并 把 "300number" 赋 值 给 该 变量 ; 

。 声明 变量 secondNumber, 并 把 "number300" 赋 值 给 该 变量 ; 

。 使 用 parseInt 将 firstNumber 转换 为 整数 ,并 弹出 转换 后 的 值 ; 
使 用 parseInt 将 secondNumber 转换 为 整数 ,并 弹出 转换 后 的 值 。 


10.3 流程 控制 与 函数 
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1. 流程 控制 语句 
(1) 寺 条 件 语句 
让 条 件 语句 格式 如 下 : 


if (表达 式 ) { 
语句 


} 


证 (表达 式 )){ 
语句 
Jelse{ 
语句 


(2) switch 条 件 语句 
switch 条 件 语句 格式 如 下 : 


switch (表达 式 ) { 
Case casel: 
语句 
break; 
Case case2: 
语句 


break; 


default: 
default 语句 

} 
(3) for 循环 语句 
for 循环 语句 格式 如 下 : 
for (表达 式 1; 表 达 式 2; 表 达 式 3) { 

语句 
} 
(4) while 循环 语句 
while 循环 语句 格式 如 下 : 
while (表达 式 ) { 


语句 
} 


(5) do-while 循环 语句 
dof 
语句 
jwhile (表达 式 ) 
(6) break/continue 语句 
break 语句 让 执行 语句 从 循环 语句 或 其 他 程序 块 中 跳出 。continue 语句 让 执行 语句 跳 
过 本 次 循环 的 剩余 语句 进入 下 一 次 循环 。 
2 函数 
把 完成 某 个 功能 的 一 组 语句 常 写成 一 个 函数 ,函数 的 定义 格式 如 下 : 
function 函数 名 ([ 参 数 ,参数 ]){ 


函数 体 


function 是 关键 字 , 函数 没有 类 型 ,参数 也 没有 类 型 。 如 : 


function gogo (obj) { 
document .write ("函数 没有 类 型 ,参数 也 没有 类 型 ") ; 


{ 
ue) 
3 argumenis 对 旬 
函数 可 以 接受 任意 个 数 的 参数 ,通过 arguments 对 象 来 访问 。 示 例 代码 如 下 : 


function say(){ 
if (arguments[1] !=" 你 好 "){ 
alert (arguments [0]); 
Jelse{ 
alert (arguments[1]); 
二 
alert (arguments.length) 7 // 返 回 参 数 的 个 数 
} 


调用 函数 如 下 : 


say ("How are you?"," 你 好 "); 


4 系统 函数 
JavaScript 提供 了 与 任何 对 象 无 关 的 系统 函数 ,这 些 函 数 不 需 要 创建 任何 对 象 就 可 以 
直接 使 用 。 


(1) eval( 字 符 串 表达 式 ) 
该 函数 的 功能 是 返回 字符 串 表 达 式 的 值 ,如 : 


var test=eval ("2+ 3"); //test 的 值 为 5 


(2) parseInt( 字 符 串 ) 
该 函数 的 功能 是 把 以 数字 开头 的 字符 串 转 换 为 整数 ,如 : 


var test=parseInt ("200.5abc"); //test 的 值 为 200 


(3) parseFloat( 字 符 串 ) 
该 函数 的 功能 是 把 以 数字 开头 的 字符 串 转换 为 实数 ,如 ， 


var test= parseFloat ("200.5abc"); //test 的 值 为 200.5 


(4) Number( 字 符 串 ) 
该 函数 的 功能 是 把 数字 字符 串 转换 为 数字 ,字符 串 中 有 非 数字 字符 则 返回 NaN, 如 : 


var test=Number ("200.5abc"); //test 的 值 为 NaN 


1Q32 能力 目标 
理解 并 掌握 流程 控制 语句 与 函数 的 用 法 。 
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1. 任 务 的 主要 内 容 
编写 网 页 example10_3. html, 在 网 页 中 嵌入 使 用 JavaScript 程序 打印 出 九 九 乘法 表 , 网 
页 运行 效果 如 图 10. 1 所 示 。 


EO Or vm sant ToSeript\ermlel0 3 htal 


| 况 收藏 严 。 入 example10_3.htnl 


1*1=1 
2 2*2=4 

3*1=3 3*2=6 3*3=9 

4*1=4 4*2=8 4*3=12 4*4=16 

5*1=5 $5*2=10 5*3=15 5*4=20 $5*5=25 

6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36 


8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64 
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81 


10.1 九 九 乘法 表 


2 任务 的 代码 模板 
将 下 列 example10_3. html 中 的 [代码 3 替换 为 程序 代码 。 
examplel0_3. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0org/TR/html4/ 
loose.dtd"> 

<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplel0 3.html< /title> 
< script type= "text/javascript"> 
【代码 1]{// 第 一 层 for 循环 

【代码 2]{// 第 二 层 for 循环 

document .write(it"* "tj+"="Hixj+""); ”// 在 页 面 输出 
} 
document .write ("<br>"); 


} 


</script> 

< /head> 

<body> 

< /body> 

</html> 

3. 任务 小 结 或 知识 扩展 

(1) 在 链接 中 调用 函数 

用 户 单 击 链 接 时 , 即 调用 函数 ,格式 如 下 : 
<a href= "javascript: 函 数 "> ..< /a> 

在 链接 中 调用 函数 的 示例 代码 如 下 : 
<html> 

<head> 


<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> 链 接 调用 函数 < /title> 

< script type= "text/javascript"> 

function gogo (){ 
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A alert ("被 链接 调用 的 函数 "); 
} 
</script> 
< /head> 
<body> 

<a href="javascript:gogo()"> 链 接 调用 函数 < /a> 
< /body> 
</html> 


(2) 由 事件 触发 调用 函数 
触发 事件 调用 函数 ,格式 如 下 ; 


事件 = "函数 " 
触发 事件 调用 函数 的 示例 代码 如 下 : 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> 事 件 触发 调用 函数 < /title> 
< script type= "text/javascript"> 
function gogo (param) { 
alert (param); 
} 
</script> 
< /head> 
<body> 
< form action=""> 
< input type= "button" value=" 单 击 我 " onclick= "gogo('o( 门 _ 几 )o 了 哈哈 ~ ')"/> 
< /form> 
< /body> 
</html> 


4 代码 模板 的 参考 答案 


【代码 11: for (var i=1;i<=9;i++) 
【代码 3]: for (var j=1;j<=i;j++) 


Taa4 实践 环节 


把 example10_3. html 中 的 打印 九 九 乘法 表 程序 写 在 JavaScript 函数 中 ,并 在 页 面 的 
body 中 使 用 超 链接 调用 该 函数 。 


10.4 JavaScript 对 象 


一 个 JavaScript 对 象 中 可 包含 若干 属性 和 方法 。 属 性 是 描述 对 象 的 状态 ,对象 用 ”. ” 运 
算 符 访问 属性 。 方 法 是 描述 对 象 的 行为 动作 ,对 象 用 ". "运算 符 调用 方法 。 


CC 
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1. 对 象 创建 
使 用 new 关键 字 来 创建 对 象 ,如 : 


var oStringObject=new String(); 
如 果 构 造 函 数 无 参数 , 则 不 必 加 括号 。 


2 JavaScript 内 部 对 象 

1) 数组 (Array) 对 象 

(1) 创建 数组 

数组 的 创建 ,示例 代码 如 下 : 

var myArray= new Rrray()7 // 新 建 一 个 长 度 为 0 的 数组 

var myArray= new Array (100); // 新 建 一 个 长 度 为 100 的 数组 

Var myArray= new Array (1,2,3); // 新 建 一 个 指定 长 度 的 数组 ,并 赋 初 值 
数组 长 度 不 国定 ,赋值 即 可 改变 长 度 。 数 组 的 主要 属性 length, 返 回 数组 长 度 的 整数 值 。 

(2) 数组 的 常用 方法 

reverse() 方 法 : 将 JavaScript 数组 对 象 内 容 反 转 。 

concat() 方 法 : 将 两 个 或 更 多 数组 组 合 在 一 起 ,如 : 


Var newArray= tmpArray.concat (tmpArray); 
join 方 法 : 返回 一 个 将 数组 所 有 元 素 用 指定 符号 连 在 一 起 的 字符 串 , 如 : 
Var newString= tmpArray.join("."); 


popO 〇 方法 : 移 除 数组 中 的 最 后 一 个 元 素 并 返回 该 元 素 。 
shift() 方 法 : 移 除数 组 中 的 第 一 个 元 素 并 返回 该 元 素 。 
slice() 方 法 : 返回 数组 的 一 部 分 ,如 : 


Var newArray= tmpArray.slice(1,3); 


(3) 数组 的 使 用 
数组 的 使 用 ,示例 代码 如 下 : 


< script type= "text/javascript"> 
Var myArray= new Array (); 
for(var i=0;i<5;i++){ 
myArray [i]=i; 
} 
for (var j=0;j<myArray.length;j++){ 
alert (myArray[j]); 
} 
</script> 


2) 日 期 (Date) 对 象 
Date 对 象 可 以 用 来 表示 任意 的 日 期 和 时 间 。 
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(1) 创建 Date 对 象 

必须 使 用 new 运算 符 创建 一 个 Date 对 象 。 示 例 代码 如 下 : 

var date=new Date ("July 8,2012"); //2012 年 7 月 8 日 

var date=new Date (2012, 7, 8); //2012 年 8 月 8 日 

var date= new Date ("2012/7/8") ; //2012 年 7 月 8 日 

var date=new Date (Milliseconds); ”// 自 1970 年 1 月 1 日 以 来 的 毫秒 数 创建 的 日 期 对 象 

var date=new Date ()7 // 当 前 系统 的 时 间 对 象 

(2) 获取 日 期 和 时 间 的 方法 

getYear(): 返回 年 数 。 

getMonth(): 返回 当月 号 数 ( 比 实际 值 小 1) 。 

getDate(): 返回 当日 号 数 。 

getDay(): 返回 星期 几 (0 表示 周 日 ) 。 

getHours(): 返回 小 时 数 。 

getMinutes(): 返回 分 钟 数 。 

getSeconds() : 返回 秒 数 。 

getTime(): 返回 毫秒 数 。 

(3) 设置 日 期 和 时 间 的 方法 

setYear(): 设置 年 数 。 

setMonth(): 设置 当月 号 数 (set6 表示 7 月 )。 

setDate() : 设置 当日 号 数 。 

setHours(): 设置 小 时 数 。 

setMinutes(): 设置 分 钟 数 。 

setSeconds(): 设置 秒 数 。 

setTime(): 设置 毫秒 数 。 

(4) Date 对 象 的 使 用 

Date 对 象 的 使 用 ,示例 代码 如 下 : 

< script type= "text/javascript"> 
var date= new Date ("2050/12/25"); 
document .write("2050 年 的 圣诞 节 是 星期 "+ date.getDay()+"<br>"); 
var datenow=- new Date(); ”// 得 到 当前 日 期 对 象 
var mills= date- datenow; // 两 个 Date 对 象 相 减 得 到 两 个 日 期 的 时 间 间 隔 (单位 是 毫秒 ) 
document .write ("2050 年 的 圣诞 节 距离 现在 还 有 "+mills+ "毫秒 <br>"); 

</script> 

3) String 对 象 

(1) 创建 String 对 象 

字符 串 对 象 的 创建 ,示例 代码 如 下 : 


var firststring="This is a string"; 


var secondSstring=new String ("This is a string"); 


String 对 象 的 主要 属性 length, 返 回 字符 串 长 度 的 整数 值 。 


37 
(2) String 对 象 的 常用 方法 hat 
charAt(i) : 返回 指定 索引 位 置 处 的 字符 ,索引 从 0 开始 。 
concat(str) : 连接 字符 串 。 
indexOf(str) : 返回 String 对 象 内 第 一 次 出 现 子 字符 串 的 字符 位 置 (从 左 到 右 查 找 ) 。 
lastIndexOf(Cstr) : 返回 String 对 象 中 子 字符 串 最 后 出 现 的 位 置 。 
replace(strl,str2): 返回 将 strl 替换 为 str2 后 的 字符 串 。 
split(separator,limit) : 将 字符 串 以 separator 作为 分 割 符 切割 成 多 个 子 字符 串 ,并 将 
它们 作为 一 个 数组 返回 ;如 果 有 limit 参数 则 返回 数组 的 limit 个 元 素 。 
substring(start,end) : 返回 一 个 指定 位 置 之 间 的 子 字符 串 ,不 包括 end。 
toLowerCase() : 返回 一 个 字符 串 ,字符 串 中 的 字母 被 转换 为 小 写字 母 。 
toUpperCase() : 返回 一 个 字符 串 ,字符 串 中 的 字母 被 转换 为 大 写字 母 。 
(3) String 对 象 的 使 用 
String 对 象 的 使 用 ,示例 代码 如 下 : 
< script type= "text/javascript"> 
Var firstString= "This is a string"; 
for(var i=0;i<firstString.length;i++){ 
alert (firstString.charAt (i)); 
| 
4) Math 对 象 
Math 对 象 是 个 全 局 对 象 , 使 用 时 不 需要 创建 。 
(1) Math 对 象 的 属性 
LN10: 10 的 自然 对 数 。 
LN2: 2 的 对 数 。 
PI: 圆周 率 。 
SQRT1_2: 1/2 的 平方 根 。 
SQRT2: 2 的 平方 根 。 
(2) Math 对 象 的 常用 方法 
abs(x): 返回 x 的 绝对 值 。 
ceil(x): 返回 大 于 等 于 x 的 最 小 整数 。 
floor(x): 返回 小 于 等 于 x 的 最 大 整数 。 
round(x): 舍 入 到 最 近 整 数 。 
sqrt(x): 返回 x 的 平方 根 。 
random(): 返回 0~1 的 随机 数 。 
(3) Math 对 象 的 使 用 
Math 对 象 的 使 用 ,示例 代码 如 下 : 
< script type= "text/javascript"> 
alert (Math.SQRT2); 


alert (Math.random()); 
</script> 
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理解 并 掌握 JavaScript 对 象 的 创建 与 使 用 。 
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1. 任 务 的 主要 内 容 
编写 网 页 example10_4. html, 在 网 页 中 符 入 使 用 JavaScript,JavaScript 程序 的 具体 要 


求 如 下 : 


。 声明 变量 dateString, 并 把 日 期 字符 串 "2012-08-08" 赋 值 给 该 变量 ; 
。 使 用 substring 方法 获得 "2012-08-08" 日 期 的 年 份 .月 份 与 日 ,并 打印 在 网 页 上 。 


2 任务 的 代码 模板 
将 下 列 example10_4. html 中 的 [代码 ] 替 换 为 程序 代码 。 
examplel0_4. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.0rg/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplel0 4.html< /title> 
< script type= "text/javascript"> 
Var dateString= "2012- 08- 08"; 


var year=【 代 码 1 // 获 得 年 份 
var month=【 代 码 3 // 获 得 月 份 
var day=【 代 码 3] // 获 得 日 


document .write ("年 份 为 : "+ Year+ "<br>"); 
document .write ("月 份 为 : "+month+ "<br>"); 
document.write(" 日 为 : "+day+ "<br>"); 

</script> 

< /head> 

<body> 

< /body> 

</html> 


3. 任务 小 结 或 知识 扩展 
在 JavaScript 中 不 必 专 门 销毁 对 象 来 释放 内 存 , 当 没有 针对 某 对 象 的 引用 时 ,该 对 象 被 


自动 废除 。 也 可 以 把 对 象 的 所 有 引用 设置 为 null 来 废除 对 象 。 


4 代码 模板 的 参考 答案 


【代码 1]: datestring.substring (0,4); 
【代码 3]: datestring.substring (5,7); 
【代码 3]: datestring.substring (8,10); 


1044” 实 践 环节 


编写 网 页 practice_4. html, 在 网 页 中 定义 一 个 JavaScript 函数 ,功能 是 去 除 字符 串 开 头 
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及 末尾 的 空格 ,并 使 用 超 链 接 调 用 该 函数 (思路 : 使 用 charAt 和 substring 去 除 头 尾 的 
空格 ) 。 


10.5 JavaScript 对 象 模型 
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1 浏览 器 对 象 模型 
浏览 器 对 象 是 提供 独立 于 内 容 而 与 浏览 器 窗口 进行 交互 的 对 象 。 浏 览 器 对 象 模型 如 
图 10. 2 所 示 。 


window 


窗口 对 象 


pe 
location 


地 址 对 象 | rr---------------------------------- 


document 


文档 对 象 


图 10.2 浏览 器 对 象 模 型 


2 窗口 (window 对象 
1) 打开 新 窗口 
使 用 open() 方 法 可 打开 一 个 新 窗口 ,示例 代码 如 下 : 


Var winObj=open ("target .html", "target 1" "width= 500,height= 300,scrollbars=no") 7 


open 方法 有 3 个 参数 : 第 一 个 代表 要 和 载 入 新 窗口 页 面 的 URL; 第 二 个 代表 新 窗口 的 名 称 ; 
第 三 个 代表 新 窗口 的 属性 ,多 个 属性 间 用 逗号 隔 开 。 

2) 对 话 框 (与 用 户 交互 ) 方 法 

(1) alert() 

该 方法 的 功能 是 弹出 一 个 提示 框 。 示 例 代码 如 下 : 

< script type= "text/javascript"> 


alert ("请 点 击 确定 按钮 1"); 


</script> 
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上 述 代码 运行 效果 如 图 10. 3 所 示 。 

(2) prompt(message, defaultText) 

该 方法 的 功能 是 弹出 可 以 输入 信息 的 文本 框 ,第 一 个 参数 代 
表 用 户 输入 信息 的 提示 ,第 二 个 参数 代表 文本 框 的 默认 值 。 示 例 
代码 如 下 : 


图 10.3 具有 “确定 ”按钮 
的 对 话 框 


< script type= "text/javascript"> 
prompt ("What's your name?", "chenheng"); 
</script> 


上 述 代码 运行 效果 如 图 10. 4 所 示 。 
(3) confirm(message) 


该 方法 的 功能 是 弹出 对 话 框 ,提示 确认 信息 。 示 例 代 码 如 下 : 


< script type= "text/javascript"> 
if (confirm(" 真 的 删除 吗 ?")){ 
// 单 击 确定 后 的 操作 
Jelse{ 
// 单 击 取消 后 的 操作 
} 
</script> 


上 述 代码 运行 效果 如 图 10. 5 所 示 。 


脚本 提示 确定 


What’ s your nane? 


CE Ow 


出 


芭 ) 真 的 出 除 吗 ? 


图 10.4 用 户 输入 对 话 框 图 10.5 确认 对 话 框 


3. history 对 象 
history 对 象 记录 着 浏览 器 所 浏览 过 的 每 一 个 页 面 ,这 些 页 面 组 成 了 一 个 历史 记录 列 
表 。 它 有 如 下 3 个 主要 方法 。 

。 forward() : 将 历史 记录 向 前 移动 一 个 页 面 。 

。 back() : 将 历史 记录 向 后 移动 一 个 页 面 ,在 网 页 中 经 常 使 用 该 方法 提供 一 个 “返回 ” 
的 功能 。 

。 go(): 转向 历史 记录 中 指定 地 址 ,使 用 此 方法 需要 一 个 参数 ,参数 可 以 是 正 负 整数 
或 字符 串 。 如 果 参 数 是 字符 串 ,那么 浏览 器 就 会 搜索 列表 ,找到 最 接近 当前 页 面 位 
置 且 URL 地 址 中 含有 此 字符 串 的 页 面 ,然后 转 到 该 页 面 。 

history 对 象 的 使 用 ,示例 代码 如 下 : 

history.go(- 3); // 向 后 返回 三 个 访问 过 的 页 面 

histroy.go(3); // 向 前 返回 三 个 访问 过 的 页 面 


history.back(); // 与 history.go(-1) ;功能 相同 
history.forward(); ”// 与 history.go(1) ;功能 相同 
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4. location 对 象 
window 对 象 的 location 属性 可 以 直接 改变 URL 地 址 : 


window.location= "http://www.baidu.com"; 
或 
location= "http://www.baidu.com"; 
还 可 以 使 用 location 对 象 的 href 属性 或 replace(URL) 方 法 改变 URL 地 址 : 
location.href= "http://www.baidu.com"; 
或 
location.replace ("http://www.baidu.com"); 
可 以 使 用 location 对 象 的 href 属性 清空 页 面 : 


location.href= "about :blank"; // 清 空 页 面 


5. document 对 象 

1) forms 集合 

在 同一 个 页 面 上 有 多 个 表单 ,通过 document. forms[ ] 数 组 获得 这 些 表单 对 象 要 比 使 用 
表单 名 称 方便 得 多 。 

2) getElementById(id) 方 法 

该 方法 的 功能 是 获得 指定 id 值 的 表单 控件 对 象 。 

3) getElementsByName(name) 方 法 

该 方法 的 功能 是 获得 指定 name 值 的 表单 控件 对 象 ,返回 的 是 对 象 数组 。 

4) 获取 表单 对 象 的 方法 


获取 表单 对 象 的 方法 如 下 : 

document .forms [0]; // 通 过 forms 对 象 的 索引 
document .forms ["myForm"]; // 通 过 forms 对 象 和 表单 名 称 
document .myForm; // 通 过 表单 名 称 


5) document 对 象 的 使 用 
document 对 象 的 使 用 ,示例 代码 如 下 : 


<html> 

<head> 

<title> The Document Object< /title> 

< script type= "text/javascript"> 

function testMethod() { 

/人 .通过 表单 获取 控件 
var name 1=document.forms[0] .nameTest; 
alert ("name 1="+name 1.value); 
var name 2=document. forms["myForm"] .nameTest; 
alert ("name 2=" +name 2.value); 


var name 3=document .myForm.nameTest; 
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alert ("name 3=" +name 3.value); 
var name 4=document .myForm.elements["nameTest"]; 
alert ("name 4=" +name 4.value); 
//2、 通 过 name 获取 控件 
var name 5=document .getElementsByName ("nameTest"); 
alert ("name 5[0]=" +name 5[0] .value); 
//3、 通 过 id 获取 控件 
var id 1=document .getElementById ("idTest"); 
alert ("id 1=" +id 1.value); 
} 
</script> 
< /head> 
<body> 
< form name= "myForm"> 
通过 name 获取 :< input type= "text" name= "nameTest" value= "firstTextValue"> 
<br> 
<br> 通 过 id 获 取 :<input type= "text" id "idlest" value= "secondTextValue"> 
<br> < input type= "button" value= "Click Me" onclick= "testMethod() "> 
</form> 
< /body> 
</html> 


10S2 ”能 力 目标 


理解 并 掌握 JavaScript 对 象 模型 (浏览 器 对 象 .窗口 对 象 .history 对 象 、location 对 象 以 
及 document 对 象 ) 的 使 用 方法 。 


1063 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example10_5. html, 在 网 页 中 嵌入 使 用 JavaScript, 程 序 的 具体 要 求 如 下 : 

。 在 页 面 中 有 表单 控件 对 象 一 一 文本 框 和 * 提 交 ” 按 钮 

。 在 JavaScript 程序 中 编写 一 个 图 数 getTextValue(), 函数 的 功能 是 分 别 使 用 
getElementsByName 和 getElementById 获得 文本 框 的 值 ,并 使 用 alert 弹出 该 值 ; 

。 单 击 “提交 ”按钮 ,触发 onclick 事件 调用 函数 getTextValue(); 

。 网 页 运行 效果 如 图 10. 6 所 示 。 


区 


和 neti 二 :降生 


CC 到 


图 10.6 ”example10_5 的 运行 效果 


2 任务 的 代码 模板 
将 下 列 example10_5. html 中 的 [代码 替换 为 程序 代码 。 
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examplel10_S. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset= UTF- 8"> 
<title> Insert title here< /title> 
< script type= "text/javascript"> 
function getTextValue () { 
var namel=【 代 码 1〗 // 通 过 getElementsByName 获得 名 为 userName 的 控件 对 象 
var name2=【 代 码 2】 // 通 过 getElementById 获得 id 为 name 的 控件 对 象 
var valuel=【 代 码 3 引 // 通 过 namel 获得 文本 框 的 值 
var value2=【 代 码 4] // 通 过 name2 获得 文本 框 的 值 
alert ("通过 getElementsByName 获得 的 值 : "+valuel); 
alert ("通过 getElementById 获得 的 值 : "+value2) ; 
} 
</script> 
< /head> 
<body> 
< form action=""> 
输入 姓名 : <input type="text" name= "userName" id= "name"/><br> 
< input type= "button" value= "提交 " onclick= "getTextValue () "/><br> 


< /form> 
< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 


getElementsByName 和 getElementById 的 区 别 : 在 一 个 HTML 文档 中 ,每 个 元 素 都 可 以 
设置 id 和 name 属性 。 其 中 id 属性 是 唯一 属性 ,不 可 以 重复 ,一 个 id 值 只 能 对 应 一 个 元 素 ;而 
name 属性 是 可 以 重复 的 ,一 个 name 值 可 以 对 应 一 组 元 素 。 所 以 ,使 用 getElementById 时 返回 
的 只 有 一 个 被 选中 的 HTML 元 素 ;而 使 用 getElementsByName 时 返回 的 是 一 个 由 多 个 
HTML 元 素 组 成 的 数组 (哪怕 HTML 页 面 中 只 有 一 个 符合 要 求 的 元 素 , 返 回 的 也 是 数组 )。 
getElementsByName 多 用 于 在 form 表单 中 选取 一 组 checkbox 或 radio。 


4 代码 模板 的 参考 答案 


【代码 1]: document .getElementsByName ("userName") ; 
【代码 3]: document .getElementById ("name"); 

【代码 3]: namel [0] .value; 

【代码 ]: name2.value; 


1064 实践 环节 


编写 网 页 practice10_5. html, 在 网 页 中 对 入 使 用 JavaScript,JavaScript 程序 的 具体 要 求 
如 下 。 

。 使 用 prompt("","") 获 取 用 户 输入 的 字符 串 , 直 到 实现 输入 "STOP" 时 停止 。 

。 打印 所 有 的 输入 : 其 他 字符 使 用 绿色 ."STOP" 使 用 红色 。 
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1. 事 件 处 理 
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10.6 操作 HIML 


通常 把 光标 或 热 键 的 动作 称 为 事件 。 由 光标 或 热 键 引发 的 一 连 串 程序 的 动作 , 称 为 事件 
驱动 。 对 事件 进行 处 理 的 程序 或 函数 称 为 事件 处 理 程序 。 

(1) 窗口 或 页 面 的 事件 处 理 

窗口 或 页 面 的 事件 处 理 如 表 10.5 所 示 。 


表 10.5 窗口 或 页 面 的 事件 处 理 


事件 | 说 明 | 事件 | 说 明 
onBlur 当前 元 素 失去 焦点 时 触发 onLoad 页 面 内 容 完 成 装载 时 触发 
onFocus 当 某 个 元 素 获得 焦点 时 触发 onUnload 当前 页 面 被 退出 或 重 置 时 触发 


(2) 键盘 或 鼠标 的 事件 处 理 
键盘 或 鼠标 的 事件 处 理 如 表 10.6 所 示 。 


表 10.6 键盘 或 鼠标 的 事件 处 理 


事 件 说 明 
onClick 当 鼠 标 单 击 时 触发 
onDblClick 当 鼠 标 双击 时 触发 
onMouseDown 当 按 下 鼠标 时 触发 
onMouseMove 当 鼠 标 移动 时 触发 
onMouseOut 当 鼠 标 离开 某 对 象 范围 时 触发 
onMouseOver 当 鼠 标 移动 到 某 对 象 范围 的 上 方 时 触发 
onMouseUp 当 和 鼠标 按 下 后 松 开 鼠标 时 触发 
onKeyPress 当 键 盘 上 的 某 个 键 被 按 下 并 且 释 放 时 触发 
onKeyDown 当 键 盘 上 某 个 键 被 按 下 时 触发 
onKeyUp 当 键盘 上 某 个 键 被 按 放 开 时 触发 
(3) 表单 元 素 的 事件 处 理 
表单 元 素 的 事件 处 理 如 表 10.7 所 示 。 
表 10.7 表单 元 素 的 事件 处 理 
表单 元 素 主要 事件 

button( 按 钮 7 onClick onBlur onFocus 

checkbox( 复 选 框 ) ‘onClick onBlur onFocus 

fle( 上 传 文件 ) ‘onClick onBlur onFocus 

password( 密 码 框 ) onBlur onFocus onSelect 

radio( 单 选 按钮 7 onClick onBlur onFocus 

select( 列 表 ) onFocus onBlur onChange 

text( 文 本 框 ) ‘onClick onBlur onFocus onChange 


textarea( 文 本 区 ) 


‘onClick onBlur onFocus onChange 
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(4) 事件 处 理 模型 Se 
在 JavaScript 中 对 事件 的 处 理 程序 通常 由 函数 完成 ,事件 一 “函数 名 ”, 如 : 


<html> 
<head> 
<title> The Document Object< /title> 
< script type= "text/javascript"> 
function testMethod() { 
alert ("事件 处 理 模型 ") ; 
} 
</script> 
< /head> 
<body> 
< form name= "myForm"> 
< input type= "button" value= "Click Me" onclick= "testMethod()" > 
</fom> 
< /body> 
</html> 


2 表单 元 素 

(1) 表单 元 素 的 通用 属性 与 方法 

form 属性: 获取 该 表单 控件 所 属 的 表单 对 象 。 
name 属性 : 获取 或 设置 表单 控件 的 名 称 。 
type 属性 : 获取 表单 控件 的 类 型 。 

value 属性 : 获取 和 设置 表单 控件 的 值 。 

focus 方法 : 让 表单 控件 对 象 获得 焦点 。 

blur 方 法 : 让 表单 控件 对 象 失 去 焦点 。 

表单 元 素 的 通用 属性 及 方法 的 示例 代码 如 下 : 


<htm> 
<head> 
<title> formc /title> 
< script type= "text/javascript"> 
// 显 示 属性 
function test() { 
Var text name= document .myForm.text name; 
alert ("text_ name.fome " +text name.form.name 
+"\ntext name.name=" +text name.name 
+"\ntext name.type=" +text name.type 
+"\ntext name.value=" +text name.value 
+"\ntext name.defaultValue=" +text name.defaultValue); 


} 
// 获 得 焦点 
function do focus() { 
document .myForm. text. name.focus(); 


} 
// 失 去 焦点 


function do blur() { 
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document .myForm. text. name.blur (); 
} 
< /script> 
< /head> 
<body> 
< form name= "myForm"> 
<input type= "text" name="text name" value="textValue"><br> 
< input type= "button" name= "button 1" value=" 显 示 属 性 " cnclick= "test()"> 
<br> 
< input type="button" name= "putton 2" value=" 鸣 得 焦点 " onclick="dp focous0"> 
<br> 
< input type= "button" name= "button 3" value=" 失 去 焦点 " onclick= 
"do blur()"> 
< /form> 
< /body> 
</html> 


(2) 文本 框 

value 属性 : 获得 文本 框 的 值 , 值 是 字符 串 类 型 。 
defaultValue 属性 : 获得 文本 框 的 默认 值 , 值 是 字符 串 类 型 。 
readonly 属性 : 只 读 , 文 本 框 中 的 内 容 不 能 修改 。 

focus 方法 : 获得 焦点 , 即 获得 鼠标 光标 。 

blur 方 法 : 失去 焦点 。 

select 方法 : 选中 文本 框 内 容 , 突 出 显示 输入 区 域 。 

文本 框 的 示例 代码 如 下 : 


<html> 
<head> 
<title> 文 本 框 求 和 < /title> 
< script type= "text/javascript"> 
function add(){ 
var sum= 0; 
var text lValue= document .forms [0] .text 1.value; 
Var text 2Value= document .forms [0] .text 2.value; 
sum= Number (text_ lValue)+Number (text 2Value); 
document .forms [0] .text 3.value=sum; 
} 
</script> 
< /head> 
<body> 
< form name= "forml" method= "post" action=""> 
<input type= "text" name= "text 1" value=""><br> 
<input type= "text" name= "text 2" value=""><br> 
< input type= "text" name= "text 3" value=""><br> 
<input type= "button" value= " 求 和 " onclick= "add()"> 
</form> 
</body> 
</html> 


(3) 复 选 框 

checked 属性 : 复 选 框 是 否 被 选中 ,选中 为 true, 未 选中 为 false。 
value 属性 : 设置 或 获取 复 选 框 的 值 。 

复 选 框 的 示例 代码 如 下 : 


<html> 
<head> 
<title> 复 选 框 反选 < /title> 
< script type= "text/javascript"> 
function unSelect () { 
var n= document .forms [0] .check.length;// 得 到 复 选 框 的 个 数 
for (var i=0;i <n;i++) { 
if (document.forms [0] .check[i] .checked) { 
document .forms [0] .check[i] .checked= false; 
} else { 
document .forms [0] .check[i] .checked= true; 


</script> 
</head> 
<body> 
< form action=""> 
< input type= "checkbox" name= "check" value= "0" />aaa<br><input 
type= "checkbox" name= "check" value= "1" />bbb<br>< input 
type= "checkbox" name= "check" value= "2" /> ccc<br>< input 
type= "checkbox" name= "check" value="3" />ddd<br>< input 
type= "checkbox" name= "check" value="4" />eee<br>< input 
type= "checkbox" name= "check" value="5" />fff<br>< input 
type= "button" value= "反选 " onclick= "unSelect () "> 
</form> 
</body> 
</html> 


(4) 单 选 按钮 

checked 属性 : 单 选 按钮 是 否 被 选中 ,选中 为 true, 未 选中 为 false。 
value 属性 : 设置 或 获取 单 选 按钮 的 值 。 

单 选 按钮 的 示例 代码 如 下 : 


<html> 
<head> 
<title> 弹 出 单 选 按钮 的 值 < /title> 
< script type= "text/javascript"> 
function gg() { 
var n= document .forms [0] .sex.length; 
for (var i=0;i <n;i++) { 
if (document.forms[0] .sex[i] .checked) { 
alert (document.forms[0] .sex[i] .value); 
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} 
</script> 
</head> 
<body> 
< form action=""> 
< input type= "radio" name= "sex" value= "male" onclick= "gg()" /> 男 
< input type= "radio" name= "sex" value= "female" onclick="gg()" /> 女 
< /form> 
< /body> 
</html> 


(5) 下 拉 列 表 

length 属性 : 选项 个 数 。 

selectedIndex 属性 : 当前 被 选中 选项 的 索引 。 

options 属性 : 所 有 的 选项 组 成 一 个 数组 ,options 表示 整个 选项 数组 ,第 一 个 选项 为 
options[0] ,第 二 个 为 options[1], 其 他 以 此 类 推 。 

option 的 value 属性 : 过 option 二 标记 中 value 所 指定 的 值 。 

option 的 text 属性 : 显示 于 界面 中 的 文本 , 即 二 option 二 .一 /option 二 之 间 的 部 分 。 

增加 选项 : 每 个 选项 都 是 一 个 option 对 象 , 可 以 创建 option 对 象 ,然后 添加 到 select 的 
末尾 。 如 : select. options[ select. length] 二 new Option(text, value) ;。 


下 拉 列 表 的 示例 代码 如 下 : 


<html> 
<head> 
<title> 下 拉 列 表 的 应 用 < /title> 
< script type= "text/javascript"> 
function gg() { 
var opObject=document .forms[0] .elements["cities"]; // 获 得 列表 对 象 
for ( var i=0;i <opobject.options.length;i++) { // 使 用 options 属性 
if (opobject.options [i] .selected) { // 找 到 被 选中 的 选项 
alert (opObject.options [il] .value);  // 弹 出 选中 选项 的 值 
alert (opObject.options [i] .text); ”// 弹 出 选中 选项 的 文本 
} 
¥ 
// 为 列表 新 增 选 项 
opObject .options [opObject .length]=new Option ("新 增 " +1, "new" +1); 
3 
</script> 
</head> 
<body> 
<form action=""> 
< select name= "cities" onchange= "gg ()"> 
<option value= "daLian"> 大 连 < /option> 
<option value= "beiJing"> 北 京 < /option> 
<option value= "shangHai"> 上 海 < /option> 
<option value= "guanZzhou"> 广 州 < /option> 
</select> 


</form> 
< /body> 
</html> 


1062 ”能力 目标 


理解 并 掌握 事件 处 理 的 方法 以 及 如 何 使 用 JavaScript 程序 操作 HTML 元 素 。 


1063 ”任务 驱动 


1 任务 的 主要 内 容 

编写 网 页 example10_6. html, 在 网 页 中 嵌入 使 用 JavaScript, 程 序 的 具体 要 求 如 下 : 

。 在 页 面 中 有 多 个 文本 框 ,每 个 文本 框 后 面 都 有 一 个 对 应 的 复 选 框 ; 

。 在 JavaScript 程序 中 编写 一 个 函数 getSum() ,该 函数 的 功能 是 把 多 个 文本 中 输入 的 
数字 进行 求 和 (只 有 复 选 框 被 选中 的 文本 框 才 进 行 求 和 ); 

。 页 面 运行 效果 如 图 10.7 所 示 。 
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图 10.7 多 个 文本 框 求 和 


2 任务 的 代码 模板 
将 下 列 example10_6. html 中 的 [代码 替换 为 程序 代码 。 
examplel10_6. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> examplel0_6.html< /title> 
< script type= "text/javascript"> 
function getSum() { 

var n=document .forms [0] .check.length;// 得 到 复 选 框 的 个 数 

var sum=07 

for (var i=0;i<n;it+){ 

诗 攻 代码 1j){ ”// 判 断 复 选 框 是否 被 选中 
var textData=document .forms[0] .data[i] .value; ”// 得 到 文本 框 的 值 
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Sum= sumt Number (textData) 7 


alert (sum); 
} 
</script> 
< /head> 
<body> 
< form action= 
< input type= "text" name= "data" value=""> 
< input type= "checkbox" name= "check" value=""><br> 
< input type= "text" name= "data" value=""> 
< input type= "checkbox" name= "check" value=""><br> 


<input type= "text" name= "data" value=""> 

< input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

< input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

< input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

<input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

<input type= "checkbox" name= "check" value=""> <br> 
<input type= "text" name= "data" value=""> 

<input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

< input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

< input type= "checkbox" name= "check" value=""><br> 
<input type= "text" name= "data" value=""> 

<input type= "checkbox" name= "check" value=""> <br> 
<input type= "text" name= "data" value=""> 

<input type= "checkbox" name= "check" value= ""><br> 
<input type= "button" value= " 求 和 " onclick= "getSum()"> 


</form> 
</body> 
</html> 
3. 任务 小 结 或 知识 扩展 


使 用 JavaScript 操作 HTML ,主要 操作 的 是 表单 控件 对 象 (文本 框 、 复 选 框 \ 单 选 按 钮 、 
下 拉 列 表 等 ) 。 


4 代码 模板 的 参考 答案 


【代码 1】: document .forms[0] .check[i] .checked 


Ta64: 实践 环节 


把 example10_6. html 中 的 函数 功能 修改 为 把 多 个 文本 中 输入 的 数字 进行 求 和 (只 有 复 
选 框 不 被 选中 的 文本 框 才 进行 求 和 ) 。 


10.7 表单 验证 


用 户 在 表单 中 输入 的 内 容 提交 到 服务 器 之 前 ,在 客户 端 利 用 表单 控件 产生 的 事件 ,运用 
脚本 (JavaScript) ,验证 用 户 输入 数据 的 有 效 性 。 


1071 核心 知识 


1 正则 表达 式 
表单 验证 常用 的 正则 表达 式 如 下 : 


验证 邮政 编码 :/^\df61S/ 
验证 身份 证 号 码 :/^\df151$ 1^\dt18}5 1^\df17} [xx]$/ 
验证 电子 邮箱 地 址 :/^\wt ((-\w+)|(\.\wt))* NM@[R-Za-z0-9]+((\.|-) [AR- Za-z0-9]+)# \.[R- za 
一 2z0-9]+S$S/ 
验证 数字 或 英文 字母 :/^[a- z0-9]+$/ 
验证 日 期 格式 :/((^((1[e-91\a{21)1([2-91\a{3D) ([-\M\._]) (1011210?[13578]) ([-\A\._]) 
(3[ON | [12] [0- 9110?01- 91)$) 1 (08-9\at2D 1 (t2-9\a{3D)) (MN. ]) (1110?[469]) ([- 人 \. ]) 
(301 [12] [0- 9]10?[1- 9])$)1(((L[8-9]\df2})1([2-9]\df3))) (t= MA\._ 1) (022) ([- MA\._]) 
(2[0-8]11[0- 9]10?[1- 9])$)1 (~([2468] [048]00) ([- 人 \。]) (0?2) ([- MV\.1) (29)$) 1C([3579] [26]00) 
(EF MN 1) 0?2) (VN. ]) (29)$) 1 (C2] [89] [0] [48]) ([=M\._]) (0?2) ([~ MV\._]) (29)$) 1 (~ ([2- 9] [0- 9] [0] 
[48]) ([- MV/\._1) (0?2) ([- \ 人 \.]) (29)$)1(([1] [89] [2468] [048]) ([- \ 八 。]) (0?2) ([- MA\._ 1) (29)$) 1 (^([2- 
9] [0- 9] [2468] [048]) ([-\ 八 .]) (0?2) ([- \ 八 ._]) (29)$) | (^([1] [89] [13579] [26]) ([- \ 八 ._]) (0?2 
([- \ 人 人._]) (29)$) 1(^([2- 9] [0- 9] [13579] [26] 
([-\ 作 .]) (0?2) ([- \ 八 .]) (29)$))/ 


正则 表达 式 的 应 用 示例 代码 如 下 : 


<html> 
<head> 
<title> 正 则 表达 的 应 用 < /title> 
< script type= "text/javascript"> 
// 验 证 Email 
function checkEmail (){ 
var exp=/^\wt ((-\wt)|(\.\w+t))* \@[A-2a-z0- 9]+ ((\.|-)[A-2Za-2z0-9]+)* \. 
[A- 2a- 2z0- 9]+$ /; 
if (!exp.test (document .forms [0] .email.value)){ 
alert ("Email 格式 错误 1"); 
document .forms [0] .email .focus (); 
return false; 
Jelse{ 
alert ("Email 格式 正确 !"); 


return true; 


} 
</script> 
< /head> 
<body> 


< form action=""> 
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Mail: <input type= "text" name= "email" /><br> 
<input type= "button" value= "提交 " onclick= "return checkEmail()" /> 
< /fom> 
< /body> 
</html> 


2 表单 验证 实例 
验证 密码 域 : 不 能 为 空 ,长 度 要 大 于 等 于 6, 只 能 是 字母 或 数字 。 代 码 如 下 : 


<html> 
<head> 
<title> 表 单 验证 实例 < /title> 
< script type= "text/javascript"> 
function valid (form) { 
// 验 证 非 空 
if (form.pass.value.length==0){ 
alert ("Please enter a password"); 
form.pass.focus(); 
return false; 
} 
// 验 证 长 度 
if (form.pass.value.length <6){ 
alert ("Password must be at least 6 characters"); 
form.pass.focus (); 
return false; 
var exp=/^[a- 20- 9]+$/; 
// 验 证 格式 
if(!exp.test (form.pass.value)){ 
alert ("Password contains illegal characters"); 
form.pass.focus (); 
return false; 
} 
alert ("OK password"); 
return true; 
} 
</script> 
</head> 
<body> 
< form action=""> 
Enter your password: 
< input name= "pass" type= "password"/> 
< input type= "button" value= "submit password" onclick= "return valid 
(this.form) "/> 
< /form> 
< /body> 
</html> 


1072 能力 目标 


理解 并 掌握 表单 验证 的 常用 方法 。 


1073 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 example10_7. html, 在 网 页 中 嵌入 使 用 JavaScript, 程 序 的 具体 要 求 如 下 : 

。 在 页 面 中 有 表单 控件 对 象 一 一 文本 框 和 “验证 ID” 按 钮 ; 

。 在 JavaScript 程序 中 编写 一 个 函数 checkID() ,函数 的 功能 是 验证 文本 框 中 输入 的 
身份 证 号 码 的 合法 性 (考虑 15 位 和 18 位 身份 证 ) ; 

。 单 击 “ 验 证 ID” 按 钮 ,触发 onclick 事件 调用 函数 checkIDO; 

。 网 页 运行 效果 如 图 10. 8 所 示 。 
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| 寅 收 藏 夹 。 菩 sxmplel0.T htnl 
输入 您 的 身份 证 号 码 ，|12345678999999999x 
忆 


来 自 网 页 的 消息 区 | 


图 10.8 身份 证 号 码 的 验证 


2 任务 的 代码 模板 
将 下 列 example10_7. html【 人 代码] 替换 为 程序 代码 。 
examplel10_7. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplel10 7.html< /title> 
< script type= "text/javascript"> 
function checkID (){ 
var idValue= document.forms[0] .indentity.value; 
var exp=/^\d{15}$ |^\d{18}$ 1^\df17} [xX]$ /; 
主攻 代码 1]) {// 代 码 1 为 合法 的 判断 条 件 
alert ("身份 证 号 码 合 法 有 效 "); 
return true; 
Jelse{ 
alert ("身份 证 号 码 无 效 ") ; 
document .forms[0] .indentity.focus(); 


return false; 
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} 
</script> 
< /head> 
<body> 
< form action=""> 
输入 您 的 身份 证 号 码 : < input type= "text" name="indentity"/><br> 
< input type= "button" value= "验证 ID" onclick= "checkID()"/> 
< /form> 
< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 
表单 验证 的 优点 : 在 客户 端 验 证 ,速度 较 快 ;减轻 了 服务 器 端的 压力 。 
4 代码 模板 的 参考 答案 


【代码 1 : exp.test (idvalue) 


1Q74 实践 环节 


制作 一 个 用 户 注册 页 面 practice10_7. html, 具 体 要 求 如 下 : 

。 要 有 常用 的 登录 账号 、 密 码 、 确 认 密 码 、 姓 名 、 身 份 证 号 码 (只 考虑 18 位 的 身份 证 )、 
出 生年 月 日 住址、 邮编.E-mail 等 输入 区 域 ( 可 以 自己 设 定 ); 

自己 设 定 验 证 规则 ,在 提交 时 检验 是 否 符合 要 求 ,(alert) 出 非法 的 输入 ,并 把 焦点 返 
回 要 输入 的 控件 对 象 ; 

根据 出 生年 月 日 判断 身份 证 号 码 是 否 合法 (只 考虑 18 位 身份 证 ,验证 日 期 就 可 以 ); 
其 他 验证 : 登录 账号 只 能 是 字母 或 数字 且 以 字母 开头 ;密码 要 在 8 位 以 上 且 需 要 有 
字母 和 数字 之 外 的 字符 ;出 生年 月 日 的 格式 为 yyyy-mm-dd; 邮编 为 6 位 数字 ;E- 
mail 的 基本 格式 验证 即 可 。 


10.8 小 结 


在 网 页 中 添加 JavaScript 的 方法 有 两 种 : 在 head 标记 中 嵌入 使 用 和 引入 外 部 JS 文件 。 

JavaScript 程序 区 分 大 小 写 ,变量 是 弱 类 型 即 任意 变量 类 型 都 是 使 用 var 声明 。 在 浏览 
器 中 逐条 解释 执行 ,如 果 某 条 语句 出 现 错误 ,后 面 的 语句 将 不 再 执行 。 

JavaScript 提供 了 与 任何 对 象 无 关 的 系统 函数 ,不 需要 创建 任何 对 象 就 可 以 直接 使 用 
这 些 函 数 , 如 : eval() ,parseInt() 、parseFloat()、Number() 等 。 

JavaScript 提供 了 Array、Date、Math 和 String 等 内 部 对 象 。JavaScript 通常 使 用 函数 
对 表单 控件 对 象 产 生 的 事件 进行 处 理 。 

使 用 JavaScript 在 客户 端 对 表单 数据 进行 有 效 性 验证 是 一 项 极其 重要 又 复杂 的 工作 ， 
因为 它 需 要 尽 可 能 全 面 地 考虑 数据 的 多 样 性 ,才能 正确 验证 。 


习 题 10 
3 ) 对 象 表示 浏览 器 的 窗口 ,可 用 于 检索 关于 该 窗口 状态 的 信息 。 
A. document B. window C. location D. history 
) 对 象 表示 给 定 浏览 器 窗口 中 的 HTML 文档 ,用 于 检索 关于 文档 的 信息 。 
A. document B. window C. screen D. history 
2 ) 方 法 要 求 窗口 显示 刚刚 访问 的 前 一 个 页 面 。 
A. back() B. go() C. display() D. view() 


. 有 关 变 量 的 命名 规则 ,下列 说 法 中 错误 的 是 ( he 

A. 以 字母 .下 面 线 (_) 或 美元 符号 ($ ) 开 头 

B. 首 字符 之 外 的 字符 可 以 是 下 夯 线 、 美 元 符号 或 任何 的 字母 .数字 

C. 不 能 有 空格 ,不 区 分 大 小 写 

D. 不 能 使 用 JavaScript 中 的 关键 字 或 保留 字 命名 

. 单 击 按钮 触发 的 事件 是 ( Ns 

A. onClick B. onFocus C. onChange D. onLoad 
.页 面 加载 时 产生 的 事件 是 ( )5 

A. onClick B. onFocus C. onChange D. onLoad 


CSS 是 英文 Cascading Style Sheet 的 缩写 ,又 称 为 “ 层 释 样式 表 ”, 简 称 为 样式 表 。 它 是 
W3C 定义 的 标准 ,一 种 用 来 为 结构 化 文档 (如 HTML 文档 ) 添 加 样式 (字体 .间距 和 背景 等 7 
的 计算 机 语言 。 


11.1 CSS 的 语法 


11.1.1 核心 知识 
CSS 的 语法 由 三 部 分 构成 : 选择 符 (selector) 、 属 性 (property) 和 属性 值 (value)。 语 法 
格式 如 下 : 


选择 符 { 
属性 : 值 


} 


选择 符 用 来 指定 针对 哪个 HTML 标签 应 用 样式 表 , 任 何 一 个 HTML 标签 都 可 以 是 一 个 
CSS 的 选择 符 。 如 : 
body { 


color: blue 


} 
其 中 ,body 是 选择 符 ,color 是 属性 ,blue 是 属性 值 。 该 规则 表示 在 网 页 body 标签 里 的 内 容 


为 蓝 色 。 如 果 你 想 为 选择 符 指定 多 个 样式 ,在 属性 之 间 要 用 分 号 加 以 分 隔 。 下 面 的 选择 符 
Pp 就 包含 两 个 样式 ,一 个 是 对 齐 方式 居中 , 另 一 个 字体 颜色 为 红 , 当 中 用 分 号 分 隔 开 。 


PT 
text- align: center; 
color: red 


} 


11.1 己 ”能力 目标 


理解 并 掌握 CSS 的 语法 结构 。 


11.13 任务 驱动 


1. 任 务 的 主要 内 容 
编写 网 页 examplell_1. html, 具 体 要 求 如 下 : 


。 使 用 CSS 设置 网 页 的 背景 色 为 LightBLue( 淡 蓝 色 ) ,背景 色 属 性 名 为 background- 


color; 


。 网 页 运行 效果 如 图 11. 1 所 示 。 
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大 :wplell_1 htnl T 


第 一 次 使 用 CSS 设 置 网 页 的 样式 ， 感觉 真神 奇 啊 | 


图 11.1 examplell_1. html 运行 效果 


2 任务 的 代码 模板 
将 下 列 examplell_1. html 中 的 [代码 替换 为 程序 代码 。 
examplell_1. html 


<html> 
< style type= "text/css"> 
/V# 代码 1 使 用 css 设置 body 的 背景 色 (background- color) 为 LightBLuex / 
【代码 1 
</style> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 1.html< /title> 
</head> 
<body> 
第 一 次 使 用 css 设置 网 页 的 样式 ,感觉 真神 奇 啊 ! 
</body> 
</html> 


3. 任 务 小 结 或 知识 扩展 


可 以 将 相同 的 属性 和 属性 值 赋予 多 个 选择 符 (组 合 )。 选 择 符 之 间 用 逗号 分 隔 。 


hi,h2,h3,h4,h5,h6 
{ 
/* 字体 颜色 为 蓝 色 * / 


color: blue 


如 : 


4 这 侯 一 休 化 教程 
158 
上 面 的 例子 是 将 所 有 正文 标题 (二 hl 放 到 二 h6 放 ) 的 字体 颜色 都 变 成 蓝 色 。“/ *” 和 “x /” 
之 间 的 内 容 为 CSS 的 注释 ,但 要 注意 不 要 将 注释 嵌 和 人 到 选择 符 语 句 里 面 。 

4 代码 模板 的 参考 答案 


【代码 11: body { 
background- color: LightBLue 
} 


1114 实践 环节 
使 用 CSS 设置 examplell_1. html 页 面 的 背景 图 片 ,背景 图 片 属性 及 属性 值 写法 为 ， 


background- image:url (图 片 路 径 ) 


图 片 由 读者 自行 选择 。 


11.2 在 网 页 中 添加 CSS 的 方法 


11 己 1 核心 知识 
CSS 在 网 页 中 按 其 位 置 可 以 分 为 三 种 : 内 嵌 样 式 、 内 部 样式 和 外 部 样式 。 


1 内 幅 样 式 (nine Style) 
内 髋 样式 是 把 样式 代码 写 在 标记 里 面 的 ,使 用 style 作为 属性 ,样式 语句 作为 属性 值 。 
内 骸 样 式 只 对 所 在 的 标记 有 效 。 如 : 


<P style= "font- size:20pt;color:red"> 
这 个 style 定 义 <p>< /p> 里 面 的 文字 是 20pt 字号 ,字体 颜色 是 红色 。 
</p> 


2 内 部 样式 (Intemal Sye Sheet) 
内 部 样式 是 使 用 二 style 二 标记 把 样式 代码 写 在 HTML 的 二 head 二 /head 玫 里 面 的 。 
内 部 样式 只 对 所 在 的 网 页 有 效 。 如 : 


<html> 
<head> 
<style type= "text/css"> 
hl { 
border- width:17 
text- align:center; 
color:red 
} 
</style> 
</head> 
<body> 
<hl> 这 个 标题 使 用 了 style。< /hl> 
</body> 
</html> 
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3. 外 部 样式 (Extemal Sye Sheet) 

将 样式 代码 写 在 一 个 以 . css 为 后 缀 的 CSS 文件 里 ,然后 在 每 个 需要 用 到 这 些 样式 的 
网 页 里 引用 这 个 CSS 文件 。 通 过 HTML 的 link 元 素 将 外 部 的 样式 文件 连接 到 网 页 
里 。 如 : 


<link rel= "stylesheet" href= "mystyle.css" type= "text/css" /> 


其 中 ,rel 和 type 属性 表明 这 是 一 个 样式 文件 ,href 属性 指定 了 外 部 样式 文件 的 相对 地 址 。 
外 部 的 样式 文件 不 能 含有 任何 像 二 head> 或 二 style> 这 样 的 HTML 标记 ,样式 表 文 件 仅 
仅 由 样式 规则 或 声明 组 成 。 


1122 能力 目标 
理解 并 掌握 在 网 页 中 添加 CSS 的 方法 。 


1123 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 examplel1_2. html, 具 体 要 求 如 下 : 

。 在 examplell_2. html 页 面 中 有 个 二 h2 二 级 别 的 标题 “正在 学 习 在 网 页 中 如 何 添加 
Ces"; 

。 使 用 内 内 样 式 方法 将 二 h2 二 标题 的 文字 颜色 设置 成 红色 。 

2 任务 的 代码 模板 

将 下 列 examplel1_2. html 中 的 [代码 3 替换 为 程序 代码 。 

examplell_2. html 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 2.html< /title> 


< /head> 
<body> 
<h 台 代码 了 > 正在 学 习 在 网 页 中 如 何 添加 css< /h2> 
< /body> 
</html> 
3. 任务 小 结 或 知识 扩展 
使 用 外 部 样式 ,相对 于 内 嵌 样 式 和 内 部 样式 ,有 以 下 优点 。 


(1) 样式 代码 可 以 复 用 。 一 个 外 部 CSS 文件 ,可 以 被 很 多 网 页 共用 。 

(2) 便于 修改 。 如 果 要 修改 样式 ,只 需要 修改 CSS 文件 ,而 不 需要 修改 每 个 网 页 。 

(3) 提高 网 页 显示 的 速度 。 如 果 样 式 写 在 网 页 里 ,会 降低 网 页 显示 的 速度 ;如 果 网 页 引 
用 一 个 CSS 文件 ,这 个 CSS 文件 已 经 在 缓存 区 (其 他 网 页 早已 经 引用 过 它 ) ,网 页 显示 的 速 
度 就 比较 快 。 
因此 ,在 实际 开发 中 一 般 使 用 外 部 样式 ,不 推荐 使 用 内 嵌 样 式 和 内 部 样式 。 
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4 代码 模板 的 参考 答案 


【代码 11: style= "color: red" 


1124 ”实践 环节 


分 别 使 用 内 部 样式 和 外 部 样式 将 examplel1_2. html 页 面 中 二 h2 志 标题 的 文字 颜色 设 
置 成 红色 。 


11.3 选择 符 的 分 类 


CSS 的 选择 符 分 为 : 普通 选择 符 、 类 选择 符 和 id 选择 符 。 
1131 核心 知识 


1. 普通 选择 符 
任意 的 HTML 标记 都 可 以 作为 选择 符 , 这 样 的 选择 符 称 为 普通 选择 符 。 其 样式 仅仅 
作用 在 选择 符 指定 的 HTML 标记 上 。 如 : 


pi 
color:red 


} 


2 类 选择 符 
HTML 标记 名 加 上 类 名 ,中 间 用 “. ”分开 ,类 名 供 该 HTML 标记 的 class 属性 使 用 。 硕 
望 二 p 二 有 两 种 样式 ,一 种 是 居中 对 齐 ,一 种 是 居 右 对 齐 。 那 么 可 以 写成 如 下 的 样式 : 
P.right { 
text- align:right 
P.center { 
text- align:center 
和 
其 中 ,right 和 center 就 是 两 个 class。 在 网 页 中 可 以 引用 这 两 个 class 设置 段落 的 对 齐 方 
式 。 示 例 代 码 如 下 : 
<p class= "center"> 这 一 段 居 中 显示 。< /p> 
<p class= "right"> 这 一 段 是 居 右 显示 。< /p> 
如 果 省 略 HTML 标记 名 只 写 “. 类 名 ”表示 这 个 类 名 适用 于 所 有 的 HTML 标记 的 class 
属性 ,这 种 选择 符 称 为 通用 类 选择 符 。 
3. id 选 择 符 
HTML 标记 名 加 上 id 名 ,中 间 用 *# "分开,id 名 供 该 HTML 标记 的 id 属性 使 用 。 如 : 


P# svP { 
font- size:12pt 
} 
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其 中 ,svp 是 个 id 选择 符 的 名 字 , 在 网 页 中 可 以 引用 这 个 id 选择 符 设置 二 p 二 的 样式 。 示例 
代码 如 下 : 


<p id- "svp"> 这 一 段 话 的 字体 大 小 为 12pt。< /p> 
如 果 省 略 HTML 标记 名 只 写 *#id 名 ”表示 这 个 id 名 适用 于 所 有 的 HTML 标记 的 id 
属性 ,这 种 选择 符 称 为 通用 id 选择 符 。 
1132 能力 目标 
理解 并 掌握 多 种 选择 符 的 定义 与 使 用 方法 。 
1133 任务 驱动 


1. 任务 的 主要 内 容 

编写 网 页 examplel1_3. html, 具 体 要 求 如 下 : 

。 页 面 中 有 hl 一 h4 标记 的 文字 ; 

对 hl 与 h2 标记 使 用 通用 类 选择 符 设置 样式 ; 
对 h3 标记 使 用 通用 id 选择 符 设置 样式 ; 

对 h4 标记 使 用 普通 选择 符 设置 样 式 ; 

网 页 运行 效果 如 图 11. 2 所 示 。 


[GE HTWL 与 CSS 网 页 设计 \ 第 11 意 CSS\exanplel1_3. htnl 


em Be 口 

使 用 类 选择 符 设 置 了 样式 

使 用 类 选择 符 设 置 了 和 hl 一 样 的 样式 
使 用 id 选 择 符 设置 了 样式 


使 用 普通 选择 符 设置 了 样式 


图 11. 2 examplell_3. html 运行 效果 


2 任务 的 代码 模板 


将 下 列 examplel1_3. html 中 的 [代码 替换 为 程序 代码 。 
examplell_3. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 3.html< /title> 
<style type= "text/css"> 
/* 代码 1 定义 名 为 hiandh2c1lass 的 通用 类 选择 符 * / 
【代码 2]{ 


font- size: 28pt; 
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ea } 
Te color: red 
} 
/= 代码 2 定义 名 为 myId 的 通用 ia 选择 符 * / 
【代码 2]{ 
font- size: 20pt; 
color: blue 
} 
h4{ 
font- size: 10pt; 
color: green 
} 
</style> 
</head> 
<body> 
<!-- 代 码 3 引用 名 为 hlandh2class 的 类 选择 符 设置 样式 --> 
<h 攻 代码 3]> 使 用 类 选择 符 设置 了 样式 < /hl> 
<!-- 代 码 4 引用 名 为 hlandh2class 的 类 选择 符 设置 样式 --> 
<h 台 代码 4]> 使 用 类 选择 符 设置 了 和 hl 一 样 的 样式 < /h2> 
<!-- 代 码 5 引用 名 为 myId 的 id 选择 符 设置 样式 --> 
<h 芷 代码 四 > 使 用 ia 选择 符 设置 了 样式 < /h3> 
<h4> 使 用 普通 选择 符 设置 了 样式 < /h4> 


</body> 
</html> 
3. 任务 小 结 或 知识 扩展 


普通 选择 符 有 一 定 的 局 限 性 , 它 针对 某 个 HTML 标记 有 效 。 而 通用 的 类 选择 符 (省 略 
HTML 标记 ) 没 有 HTML 标记 的 限制 。 另 外 ,尽量 少 用 id 选择 符 , 因 为 在 一 个 页 面 中 ,每 
个 id 只 能 使 用 一 次 。 

4 代码 模板 的 参考 答案 


【代码 1] : .hlandh2class 

【代码 3] : #myId 

【代码 3]: class= "hlandh2class" 
【代码 9] : class= "hlandh2class" 
【代码 5]: id= "myId" 


1134 实践 环节 
将 examplell_3. html 中 的 通用 类 选择 符 和 通用 id 选择 符 改 成 类 选择 符 和 id 选择 符 。 
11.4 伪 类 及 伪 对 象 


伪 类 及 伪 对 象 由 CSS 自动 支持 ,属于 CSS 的 一 种 扩展 类 型 。 名 称 不 能 被 用 户 自 定义 ， 
使 用 时 只 能 按照 标准 格式 进行 应 用 。 
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1. 超 链接 伪 类 
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超 链 接 伪 类 共有 4 个 ,a:link、a:visited、a:hover 和 a:active。a:link 表示 未 被 访问 的 链 


接 ,a:visited 表示 已 被 访问 过 的 链接 ,a 


:hover 表示 鼠标 悬浮 在 上 的 链接 ,a:active 表示 鼠标 


单 击 激活 链接 。 由 于 优先 级 的 关系 ,在 写 超 链接 二 a 二 的 CSS 时 ,一 定 要 按照 a:link、a: 


visited、a:hover、a:active 的 顺序 书写 。 


a:link {color: red} 
a:visited {color: green} 
a:hover {color: yellow} 
a:active {color: blue} 


2 常用 伪 对 象 


如 : 


/* 未 被 访问 的 链接 红色 * / 

/* 已 被 访问 过 的 链接 绿色 * / 
/* 鼠标 悬浮 在 上 的 链接 黄色 * / 
/* 鼠标 单 击 激活 链接 蓝 色 * / 


:first-letter 设置 对 象 内 的 第 一 个 字符 的 样式 表 属 性 ,如 设置 段落 p 标记 的 第 一 个 字符 


的 样式 代码 如 下 : 


P:first- letter { 
color: red; 
font- size: 16px 

} 


:first-line 设置 对 象 内 的 第 一 行 的 样 


body:first- line { 
color: red; 
font- size: 16px 


} 


1142 能 力 目 标 


1143 任务 驱动 
1 任务 的 主要 内 容 


式 表 属 性 ,如 设置 body 对 象 里 第 一 行 的 样式 代码 如 下 : 


理解 并 掌握 常见 伪 类 及 伪 对 象 的 使 用 方法 。 


编写 网 页 examplell_4. html, 具 体 要 求 如 下 : 
。 页 面 中 有 hl 标题 ,使 用 伪 对 象 :first-letter 设置 hl 标题 的 首 字符 样式 ; 


。 网 页 运行 效果 如 图 11. 3 所 示 。 


KF 杠 ] E: \HTML 与 CSs 网 页 设计 \ 第 11 章 CSS\examplell_4. html 


便 收 毫 天 


六 xnplell_4. htnl 


2012 伦 敦 奥运 会 开始 啦 ! 


第 一 个 比赛 日 是 属于 中 国 的 。 


图 11.3 examplell_4. html 运行 效果 
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2 任务 的 代码 模板 
将 下 列 examplell_4. html 中 的 [代码 替换 为 程序 代码 。 
examplell 4. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 4.html< /title> 
<style type= "text/css"> 
/* 代码 1 使 用 伪 对 象 :first- letter 设置 hl 标题 的 首 字符 样式 * / 
【代码 1]1 
color: red; 
font- size: 44px 
} 
</style> 
< /head> 
<body> 
<hl> 2012 伦敦 奥运 会 开始 啦 !< /hl> 
第 一 个 比赛 日 是 属于 中 国 的 。 
</body> 
</html> 


3. 任务 小 结 或 知识 扩展 
伪 类 可 以 看 做 是 一 种 特殊 的 类 选择 符 , 是 能 被 支持 CSS 的 浏览 器 自动 识别 的 特殊 选择 
伪 类 的 语法 是 在 原 有 的 语法 里 加 上 一 个 伪 类 (pseudo-class) : 


selector:pseudo- class {property: value} (选择 符 : 伪 类 { 属 性 : 值 }) 


伪 类 和 类 不 同 ,是 CSS 已 经 定义 好 的 ,不 能 像 类 选择 符 一 样 随 意 用 别 的 名 字 , 根 据 上 面 的 语 
法 可 以 解释 为 对 象 (选择 符 ) 在 某 个 特殊 状态 下 ( 伪 类 ) 的 样式 。 


4 代码 模板 的 参考 答案 


【代码 1]: . hl:first- letter 


1144 实践 环节 


编写 一 个 网 页 praticel11_4. html 和 一 个 CSS 文件 mycss. css, 具 体 要 求 如 下 。 

。 在 网 页 praticell_4. html 中 有 4 个 超 链接 ; 

。 在 CSS 文件 mycss. css 中 使 用 超 链 接 伪 类 设置 超 链接 的 样式 : 未 被 访问 的 链接 为 
红色 ,已 被 访问 过 的 链接 为 绿色 ,鼠标 悬浮 在 上 的 链接 为 黄色 以 及 鼠标 单 击 激活 的 
链接 为 蓝 色 ; 

。 在 网 页 praticel1_4. html 中 利用 link 元 素 添加 外 部 样式 文件 mycss. css; 

。 网 页 运行 效果 如 图 11.4 所 示 。 


{ps 


[er [图 : YomSScss 同 页 设计 \ 第 L1 章 Css\praticel1_4. html 
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aaaaaa 
bbbbbbb 


dddddddd 


图 11.4 praticell_4. html 运行 效果 


11.5 字体 属性 
CSS 常用 字体 属性 包括 字体 的 类 型 .大 小 、 颜 色 等 各 个 方面 。 
11 扎 1 核心 知识 


1 字体 类 型 属性 (fontfamily) 
该 属性 设 定 字体 类 型 ,如 Arial.Tahoma Courier 等 。 示 例 代 码 如 下 : 


.S311{ 


font- family: Arial 
‘ 


2 字体 大 小 属性 (fontsize) 


该 属性 设 定 字体 的 大 小 。 字 体 大 小 的 设 定 可 以 有 多 种 方式 ,最 常用 的 是 pt( 磅 ) 和 px 
(像素 )。 示 例 代 码 如 下 : 
.32 { 


font- size: 16pt 


} 


3. 字 体 风 格 属性 (fontstye) 
该 属性 有 三 个 值 可 选 : normal \italic .oblique。normal 是 默认 值 (正常 的 字体 ) ,italic 和 
oblique 都 是 斜体 显示 。 示 例 代码 如 下 : 


。31L 


font- sytle: italic 
} 


4 加 粗 字 体 属性 (fontweighb 


该 属性 取 值 包括 normal、bold、bolder 和 lighter。normal 是 默认 值 (正常 粗细 ) ;bold 表 
示 粗 体 ;bolder 表示 特 粗 ;lighter 表示 特 细 。 示 例 代码 如 下 : 
<p style= "font- weight:bold"> 


这 段 文字 的 加 粗 字体 属性 (font- weight) 值 是 bold。 
<p> 
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和 5 字体 变 体 属 性 (fontvarianb 
该 属性 有 两 个 值 ,normal 和 small-caps,normal 是 默认 值 。small-caps 表示 将 小 写 的 英 
文字 体 转 换 为 大 写 英文 字体 。 示 例 代码 如 下 : 


-S11{ 
font- variant: small- caps 
} 


6. 字体 复合 属性 (font) 

该 属性 可 以 设 定 不 同 字体 属性 的 缩写 。 可 以 综合 字体 风格 (font-style)、 字 体 变 体 
(font-variant) ,字体 加 粗 (font-weight) .字体 大 小 (font-size) 等 属性 , 取 值 之 间 用 空格 区 分 。 
示例 代码 如 下 : 


-311{ 
font: italic bold llpt arial 
} 


7. 字 体 颜色 属性 (color) 
该 属性 可 以 设 定 字体 的 颜色 ,颜色 值 可 以 是 英文 单词 或 十 六 进 制 值 。 示 例 代码 如 下 : 


.S311{ 
color: red 


} 


1152 能力 目标 
理解 并 掌握 字体 属性 的 设置 方法 。 
1153 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 examplell_5. html, 具 体 要 求 如 下 : 

。 页 面 中 有 个 hl 标题 “正在 学 习 CSS 的 字体 属性 ”; 

。 使 用 内 部 样式 设置 hl 标题 的 字体 类 型 为 “仿宋 _GB2312”, 字 体 风格 为 斜体 ,字体 颜 
色 为 绿色 ; 

。 网 页 运行 效果 如 图 11. 5 所 示 。 


可 她 ] E: \HTWL 与 css 网 页 设计 \ 第 11 章 CSS\chl1\examplel1_5. htnl| 


收 豪 天 | 芒 exanplell_5 htnl [ 


正 医 学 了 HCSS 扩 字 佚 启 料 


11.5 CSS 字体 属性 


2 任务 的 代码 模板 
将 下 列 examplel1_5. html 中 的 [代码] 替换 为 程序 代码 。 


examplell_s. html 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 5.html< /title> 

<style type= "text/css"> 


hi{ 
【代码 11: 仿宋 _GB2312; /#* 代码 1 设置 字体 类 型 为 仿宋 _GB2312* / 
【代码 2】: italic; /* 代码 2 设置 字体 风格 为 斜体 * / 
【代码 3]: green /* 代码 3 设置 字体 颜色 为 绿色 * / 
} 
</style> 
< /head> 
<body> 
<hl> 正 在 学 习 css 的 字体 属性 < /hl> 
</body> 
</html> 
3. 任务 小 结 或 知识 扩展 


font-family 属性 设置 的 字体 类 型 受用 户 浏览 器 的 影响 。 如 果 用 户 浏览 器 环境 中 没有 相 
关 的 字体 , 则 设置 的 字体 将 失去 作用 。 

4 代码 模板 的 参考 答案 

【代码 1]: font- family 


【代码 2 : font- style 
【代码 3】: color 


1154 实践 环节 
将 examplell_5. html 中 的 字体 单个 属性 综合 成 复合 属性 (font) 。 


11.6 文本 属性 


CSS 常用 文本 属性 包括 文本 的 对 齐 、 缩 进 .间距 等 。 
1161 核心 知识 


1. 水 平 对 齐 属性 (textaligm) 
该 属性 取 值 包括 left( 左 对 齐 ) \right( 右 对 齐 ) ,center( 居 中 对 齐 ) 和 justify( 两 端 对 齐 )4 
种 。 示 例 代码 如 下 : 
#top{ 
text- align: center 


} 


2 文本 修饰 属性 (text-decoration) 
该 属性 可 以 设 定 文本 的 下 画 线 、 删 除 线 等 。 取 值 有 none( 默 认 值 )、underline( 对 文本 添 
加 下 画 线 ) .overline( 对 文本 添加 上 画 线 ) \line-through( 对 文本 添加 删除 线 ) 以 及 blink( 闪 
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烁 文本 效果 )。 示 例 代码 如 下 : 
#top { 


text— decoration: blink 


3. 文 本 缩 进 属性 (text-indent) 

该 属性 可 以 设 定 文本 首 行 缩 进 , 取 值 是 长 度 或 百分比 。 长 度 可 以 用 绝对 单位 (cm、mm、 
in、pt、pc) 或 者 相对 单位 (em 、ex、px)。 

示例 代码 如 下 : 

#top { 


text- indent: 10px 
} 


4. 文 本 行 高 属性 (line-height) 

该 属性 可 以 设 定 文本 中 行 与 行 之 间 的 距离 , 取 值 是 长 度 或 百分比 。 
示例 代码 如 下 : 

#top { 


line- height: 150% 


5 大 小 写 转换 tex-transform 

该 属性 用 来 转换 英文 字母 的 大 小 写 。 取 值 有 lowercase( 使 每 个 单词 的 首 字母 大 写 )， 
uppercase( 使 每 个 单词 的 所 有 字母 大 写 ) ,capitalize( 使 每 个 单词 的 所 有 字母 小 写 ) 。 示 例 代 
码 如 下 : 

#top { 


text- transform: lowercase 


} 

6. 单 词 间隔 (word-spacing) 

使 用 word-spacing 可 以 设 定 单词 的 间隔 距离 。 示 例 代码 如 下 : 
#top { 


word- spacing: lcm 
} 


7. 字符 间隔 (letter-spacing) 
使 用 letter-spacing 可 以 设 定 字符 之 间 的 间隔 距离 。 示 例 代码 如 下 : 
#top { 


letter- spacing: lcm 
} 


1162 能 力 目标 
理解 并 掌握 文本 属性 的 设置 方法 。 


1163 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 examplel1_6. html, 具 体 要 求 如 下 : 

。 页 面 中 有 3 段 话 ,第 一 段 居 左 显示 ,第 二 段 居 中 显示 ,第 三 段 居 右 显示 ,并 且 每 段 首 
行 缩 进 为 2em; 

网 页 最 后 有 个 没有 下 画 线 的 超 链接 ; 

网 页 运行 效果 如 图 11.6 所 示 。 


© [Or mscssFmiait\Ll cssvehtivexmplelle hel [t+ x] [P sine ip -| 


帘 收 基 严 | 疙 exanplell_8 htnl [a 
第 一 段 话 居 左 
第 二 段 话 居中 
第 三 段 话 居 右 
该 超 链接 没有 下 画 线 
图 11.6 CSS 文本 属性 
2 任务 的 代码 模板 


将 下 列 examplel1_6. html 中 的 [代码 ] 蔡 换 为 程序 代码 。 
examplell 6. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 6.html< /title> 
<style type= "text/css"> 
p{ 
【代码 11/* 代码 1 设置 首 行 缩 进 为 2amx / 
} 
p# first{ 
【代码 1/* 代码 2 设置 文本 居 左 对 齐 * / 
} 
p# second{ 
【代码 引 /* 代码 3 设置 文本 居中 对 齐 * / 
} 
p# third{ 
【代码 9]/* 代码 4 设置 文本 居 右 对 齐 * / 
} 
at 
【代码 引 ]/* 代码 5 设置 文本 无 下 画 线 * / 
六 
</style> 
< /head> 
<body> 
<p id- "first"> 第 一 段 话 居 左 < /p> 
<p id= "second"> 第 二 段 话 居中 < /p> 
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A <p id- "third"> 第 三 段 话 居 右 < /p> 
<a href=#"> 该 超 链接 没有 下 夯 线 < /a> 


< /body> 
</html> 


3. 任务 小 结 或 知识 扩展 

长 度 单位 有 相对 长 度 单位 和 绝对 长 度 单位 。 

1) 相对 长 度 单位 

em: 相对 于 当前 对 象 内 文本 的 字体 尺寸 。 

ex: 相对 于 字符 “x” 的 高 度 , 通 常 为 字体 高 度 的 一 半 。 
px: 像素 (Pixel) 。 

2) 绝对 长 度 单位 

pt: 点 (Point) 。 

pc: 派 卡 (Pica) ,相当 于 我 国 新 四 号 铅字 的 尺寸 。 
in: 英寸 (Inch) 。 

cm: 厘米 (Centimeter) 。 

mm: 毫米 (Millimeter) 。 

lin 一 2.54cm 一 25. 4mm 一 72pt 一 6pc。 


4 代码 模板 的 参考 答案 


【代码 1]: text- indent: 2em 
【代码 2 : text- align: left 
【代码 3 : text- align: center 
【代码 4]: text- align: right 
【代码 5]: text- decoration: none 


1164 实践 环节 
将 examplel1_6. html 页 面 中 所 有 字符 的 间距 设置 为 2em。 


11.7 背景 属性 


11.7.1 核心 知识 


1. 背景 颜色 (background-colon) 

该 属性 为 HTML 元 素 设 定 背景 颜色 ,相当 于 HTML 中 的 bgcolor 属性 。 示 例 代 码 
如 下 : 

body { 


background- color: green 


} 


2 背景 图 片 (background-image) 
该 属性 为 HTML 元 素 设 定 背 景 图 片 . 相 当 于 HTML 中 的 background 属性 。 示 例 代 


码 如 下 : 


body { 
background- image: url (images/mybg.jpg) 


3. 背景 重复 (backgroundrepeat) 

该 属性 和 background-image 属性 连 在 一 起 使 用 ,决定 背景 图 片 是 否 重复 。 如 果 只 设置 
background-image 属性 ,没有 设置 background-repeat 属性 ,在 默认 状态 下 ,图 片 既 横向 重 
复 , 又 纵向 重复 。 取 值 为 repeat-x 时 背景 图 片 横向 重复 ; 取 值 为 repeat-y 时 背景 图 片 纵向 重 
复 ; 取 值 为 no-repeat 时 背景 图 片 不 重复 。 示 例 代 码 如 下 : 


body { 
background- image: url (images/mybg.jpg); 
background- repeat: repeat-y 

} 


4 背景 附着 (backgroundattachmenb) 
该 属性 和 background-image 属性 连 在 一 起 使 用 ,决定 图 片 是 否 跟随 内 容 滚动 。 这 个 属 
性 有 两 个 值 ,一 个 是 scroll( 滚 动 ) ,一 个 是 fixed( 固 定 ) 。 默 认 值 是 scroll。 示 例 代 码 如 下 : 


body { 
background- image: url (images/mybg .jpg); 
background- repeat: repeat— y; 
background- attachment: fixed 

’ 


5. 背景 位 置 (background-position) 
该 属性 和 background-image 属性 连 在 一 起 使 用 ,决定 了 背景 图 片 的 最 初 位 置 。 示 例 代 
码 如 下 : 


body { 
background- image: url (images/mybg.jpg); 
background- repeat: repeat— y; 
background- position: 30px 60px 

} 


6. 背景 复合 (background) 

该 属性 用 来 综合 定义 元 素 的 背景 ,包括 背景 颜色 .背景 重复 .背景 附着 和 背景 位 置 ,之 间 
用 空格 相连 。 示 例 代码 如 下 : 

body { 


background: green url (images/mybg.jpg) repeat-y 30px 60px 
} 


11.72 ”能 力 目 标 
理解 并 掌握 背景 属性 的 设置 方法 。 


1. 任 务 的 主要 内 容 

编写 网 页 examplel1l_7. html, 具 体 要 求 如 下 : 

。 页面 中 有 4 段 话 ,第 四 段 话 有 背景 图 片 plane. jpg, 并 且 背 景 图 片 不 重复 ; 
。 网 页 运行 效果 如 图 11.7 所 示 。 


2 了 : VHTWL 与 CSS 网 页 设计 \ 第 11 章 CSS\ehl1\exanple11_7. htnl 


图 11.7 CSS 背景 属性 


2 任务 的 代码 模板 
将 下 列 examplel1_7. html 中 的 【代码 】 蔡 换 为 程序 代码 。 
examplel1_7. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 7.html< /title> 
<style type= "text/css"> 
#forth{ 
【代码 1]/ * 代码 1 设置 背景 图 片 为 plane.jpgx / 
【代码 2]/* 代码 2 设置 背景 图 片 不 重复 * / 
} 
</style> 
< /head> 
<body> 
<p> 第 一 段 话 < /p> 
<p> 第 二 段 话 </p> 
< 户 第 三 段 话 < /p> 
<p id- "forth"> 第 四 段 话 带 有 背景 图 片 <br><br><br><br> 
<br><br><br><br><br><br><br><br><br> 


<br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br> 
</p> 

< /body> 

</html> 


3. 任务 小 结 或 知识 扩展 

设置 背景 图 片 时 ,要 注意 图 片 文件 路 径 与 网 页 文件 路 径 之 间 的 关系 。 如 果 背 景 图 片 与 
背景 颜色 同时 设 定 , 那 么 背景 图 片 将 会 覆盖 背景 颜色 。 

4 代码 模板 的 参考 答案 


【代码 1】: background- image: url (plane.jpg) 
【代码 2】]: background- repeat: no- repeat 


1174 实践 环节 
将 examplel1_7. html 中 的 背景 单个 属性 综合 成 背景 复合 属性 (background) 。 


11.8 定位 属性 
在 CSS 中 定位 分 为 绝对 定位 和 相对 定位 。 
1181 核心 知识 


1. 定位 方式 (position) 

该 属性 用 于 对 HTML 标记 进行 定位 。static 为 默认 值 ,表示 无 特殊 定位 ,对 象 遵 循 
HTML 定位 规则 ;absolute 表示 采用 绝对 定位 .需要 同时 使 用 left、right、top 和 bottom 等 
属性 进行 绝对 定位 ,采用 绝对 定位 的 对 象 可 层 释 ;fixed 表示 当 页 面 滚 动 时 ,元 素 保持 在 浏览 
器 视 区 内 ;relative 表示 相对 定位 ,对 象 不 可 层 释 ,但 可 根据 left\right\top 和 bottom 等 属性 
设置 在 页 面 中 的 偏 移 位 置 。 示 例 代 码 如 下 : 


#topt{ 
position: absolute; 
top: Opx; 
left:0px; 
right: 100px; 
bottom: 500px 

} 


2 层 琶 顺序 (zindex) 
该 属性 用 于 设置 层 (div) 的 先后 顺序 和 覆盖 关系 。 其 值 是 无 单位 的 整数 值 , 可 以 取 负 
值 , 属 性 值 越 高 , 层 就 越 靠 上 (可 覆盖 别 的 层 ) 。 示 例 代码 如 下 : 


#top{ 
position: absolute; 
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top: Opx; 
left:0px; 
right: 100px; 
bottom: 500px; 
z-index: 2 


} 


3. 浮 动 (foat) 
该 属性 用 来 改变 元 素 的 显示 方式 ,可 改变 元 素 的 显示 位 置 ,同时 会 对 相 邻 内 容 造成 影 


。 取 值 为 left 时 ,表示 文字 浮动 在 元 素 的 右边 ; 取 值 为 right 时 ,表示 文字 浮动 在 元 素 的 左 
。 示 例 代码 如 下 : 


img{ 
float: right 
} 
该 示例 表示 将 图 像 浮动 在 文字 的 右边 。 
4 宽度 (width) 和 高 度 (heighb) 
利用 width 和 height 属性 可 以 设置 层 的 宽度 和 高 度 。 属 性 值 需要 设置 数值 和 单位 。 


示例 代码 如 下 : 


1182 能 力 目标 


#top{ 
position: absolute; 
top: Opx; 
left:0px; 
right: 100px; 
bottom: 500px; 
2- index: 2; 
width:300px; 
height: 400px 

} 


理解 并 掌握 定位 属性 的 设置 方法 。 
1183 ”任务 驱动 
1 任务 的 主要 内 容 


编写 网 页 examplel1_8. html, 具 体 要求 如 下 : 

。 页 面 中 有 两 个 层 (DIV) ,第 一 个 层 里 面 放 的 是 一 张 照片 ( 层 到 顺序 值 为 1) ,第 二 个 层 
的 层 释 顺序 值 为 2 ,两 个 层 都 使 用 CSS 进行 绝对 定位 ; 

。 网 页 运行 效果 如 图 11. 8 所 示 。 

2 任务 的 代码 模板 

将 下 列 examplell_8. html 中 的 [代码] 替换 为 程序 代码 。 


[号 可 | 园 amucss 同 页 设计 \ 第 11 章 CSS\chll\exanplell 8 htal 国 [s [x | [P sine 
突 收藏 夹攻 examplell 8. htnl | | 


以 航空 母 舰 或 其 他 军舰 为 基地 的 海军 飞机 。 用 于 攻击 他 
邮 面 目标 ， 并 遂行 预警 、 侦 察 、 巡 远 、 护 航 、 布 备 、 
多 站 有 人 失主 要 ft 和 县 之 一 


舰 载 机 按 使 命 分 为 歼击机 、 强 击 机 、 反 洪 机 、 预 警 机 、 
忱 起 落 原理 分 为 普通 舰 载 机 、 舰 载 季 直 短 距 起 落 机 和 舰 卉 


全 全 家 让 和 普通 舰 载 机 一 般 在 6 级 风 、4 

讶 母 舰 上 起 落 。 舰 载 机 能 远 在 舰 起 和 战 木 导弹 射程 以 外 进 生动 5 措 助 

加 远离 士 ， 进 入 各 海洋 活动 。 航 载 歼击机 多 兼 有 攻击 水 面 、 地 面目 标 | 能 舰 
艇 强 击 机 攻击 机 ) 多 兼 有 空战 能 力 ， 以 充分 发 挥 育 限 数量 舰 载 机 的 最 大 效能 。 舰 载 机 
和 母 舰 出 海 时 上 舰 ， 母 舰 返 回 基地 时 飞 回 岸 上 机 场 。 一 般 航 空 母 舰 可 搭载 数 十 至 百 余 架 
载 机 。 通常 是 多 机 种 同时 搭载 ， 以 形成 综合 作战 能 力 。 


图 11.8 CSS 定位 属性 


examplell_8. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 8.html< /title> 
<style type= "text/css"> 
#divi{ 
【代码 11/* 代码 1 设置 绝对 定位 * / 
【代码 3/* 代码 2 设置 层 倒 顺序 值 为 1* / 
top: Opx; 
right: 100px 
} 
#div2{ 
【代码 习 /* 代码 3 设置 绝对 定位 * / 
【代码 4]/* 代码 4 设置 层 倒 顺序 值 为 2x* / 
top: Opx; 
left: Opx; 
right: 100px; 
} 
</style> 
< /head> 
<body> 
<div id="divl"> 
< img src= "plane.jpg" width= "200" height= "200"> 
</div> 
<div id= "div2"> 
<p> 以 航空 母 舰 或 其 他 军舰 为 基地 的 海军 飞机 。 用 于 攻击 空中 水面 水 下 舰 载 机 和 地 
面目 标 ,并 送行 预警 .侦察 巡逻、 护航 ,布雷 ,扫雷 、 补 给、 救护 和 垂直 登陆 等 任务 。 
它 是 海军 航空 兵 的 主要 作战 手段 之 一 ,是 在 海洋 战场 上 夺取 和 保持 制空权 、 制 海 权 
的 重要 力量 。< /p> 
<p> 舰 载 机 按 使 命 分 为 歼击机 、 强 击 机 、 反 潜 机 、 预 警 机 、 侦 察 机 和 电子 对 抗 机 等 。 按 起 
落 原理 分 为 普通 舰 载 机 、 舰 载 垂 直 / 短 距 起 落 机 和 舰 载 直升机 。< /p> 
<p> 舰 载 机 能 适应 海洋 环境 。 普 通 舰 载 机 一 般 在 6 级 风 、4 一 5 级 浪 的 海 况 下 , 仍 能 在 航 
空 母 舰 上 起 落 。 舰 载 机 能 远 在 舰 炮 和 战术 导弹 射程 以 外 进行 活动 ;借助 母 舰 的 续 


' ”EMTOS CSS 网 页 设计 教学 做 一 体 化 教程 

176 ， 

re 航 力 , 可 远离 本 国 领土 ,进入 各 海洋 活动 。 舰 载 歼击机 多 兼 有 攻击 水 面 . 地 面目 标 
的 能 力 , 舰 载 强 击 机 ( 改 击 机 ) 多 兼 有 空战 能 力 , 以 充分 发 挥 有 限 数量 舰 载 机 的 最 大 
效能 。 舰 载 机 在 母 舰 出 海 时 上 舰 , 母 舰 返 回 基地 时 飞 回 岸上 机 场 。 一 舰 航空 母 舰 
可 搭载 数 十 至 百 余 架 舰 载 机 。 通 常 是 多 机 种 同时 搭载 ,以 形成 综合 作战 能 力 。 

</p> 
</div> 
< /body> 
</htm> 


3. 任务 小 结 或 知识 扩展 

在 examplell_8. html 页 面 中 divl 图 像 层 的 z-index 属性 为 1,div2 文字 层 的 z-index 属 
性 为 2。 可 以 看 到 图 像 层 被 文字 层 覆 盖 ,说 明 z-index 属性 值 越 高 , 它 的 层 越 靠 上 。 

4 代码 模板 的 参考 答案 

【代码 1】: position: absolute; 

【代码 2]: z- index: 1; 


【代码 3 : position: absolute; 
【代码 4]: z- index: 2; 


1184 实践 环节 


将 examplel1_8. html 中 两 个 div 的 z-index 属性 值 互 换 , 然 后 再 运行 页 面 ,查看 运行 
效果 。 


11.9 边框 属性 


TeT1 核心 知识 


1. 边框 风格 (borderstye) 

该 属性 用 来 定义 上 下 左右 边框 的 样式 。 样 式 包 括 无 ,虚线 、 实 线 、 双 实 线 等 。 属 性 取 值 
为 : none( 没 有 边框 ,无 论 边框 宽度 设 为 多 大 )、dotted( 点 线 式 边框 )、dashed( 破 折线 式 边 
框 ) solid( 直 线 式 边框 ) ,double( 双 线 式 边框 ) .groove( 槽 线 式 边框 ) .ridge( 兰 线 式 边框 )、 
inset( 内 能 效果 的 边框 ) ,outset( 突 起 效果 的 边框 )。 示 例 代 码 如 下 : 


.myCss{ 
border- style: dotted 
} 


2 边框 宽度 (border-width) 

该 属性 用 来 定义 上 下 左右 边框 的 宽度 。 属 性 取 值 为 : medium (默认 值 )、thin( 比 
medium 细 ) .dashed( 比 medium 粗 )。 属 性 还 可 以 用 长 度 单位 定 值 (绝对 长 度 单位 或 者 相对 
长 度 单位 )。 示 例 代码 如 下 : 

.myCss{ 

border— width: 20px 


3. 边框 颜色 (border-color) 
该 属性 用 来 定义 上 下 左右 边框 的 颜色 。 示 例 代 码 如 下 : 
.myCssf 


border-color: cyan 
} 


4 边框 复合 (border) 
该 属性 用 来 定义 边框 的 所 有 属性 ,包括 风格 、 宽 度 和 颜色 。 示 例 代码 如 下 : 
-myCss{ 


border: cyan 20px dotted 
. 


5. 单 边 边框 

上 下 左右 四 个 边框 不 但 可 以 统一 设 定 , 也 可 以 分 开设 定 。 设 定 上 边框 属性 ,可 以 使 用 
border-top、border-top-width、border-top-style 和 border-top-color。 设 定 下 边框 属性 ,可 以 
使 用 border-bottom、border-bottom-width、border-bottom-style 和 border-bottom-color。 设 
定 左 边框 属性 ,可 以 使 用 border-left、 border-left-width、border-left-style 和 border-left- 
color。 设 定 右 边框 , 可 以 使 用 border-right、 border-right-width、border-right-style 和 


border-right-color。 


1192 能 力 目标 

理解 并 掌握 边框 属性 的 设置 方法 。 
1193 任务 驱动 

1 任务 的 主要 内 容 


编写 网 页 examplel1_9. html, 具 体 要 求 如 下 : 
。 页面 中 有 两 个 层 (DIV); 

。 第 一 个 层 的 边框 颜色 是 green ,边框 宽 度 为 2px, 边 框 风格 为 虚线 ; 

。 第 二 个 层 的 边框 颜色 是 blue, 边 框 宽度 为 4px, 边 框 风格 为 双 实 线 ; 
。 网 页 运行 效果 如 图 11.9 所 示 。 

Er 有 mcss 网 页 设计 \ 第 11 章 CSS\ehl1\exanplel1_9 htnl 
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图 11.9 CSS 边 框 属性 
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2 任务 的 代码 模板 
将 下 列 examplel1_9. html 中 的 [代码 】 蔡 换 为 程序 代码 。 
examplell_9. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 9.html< /title> 
< style type= "text/css"> 
#divl{ 
position: absolute; 
top: 50px; 
left:50px; 
height: 100px; 
width: 150px; 
【代码 11/* 代码 1 设置 边框 的 风格 为 虚线 * / 
【代码 2]/* 代码 2 设置 边框 的 颜色 为 绿色 * / 
【代码 3]/* 代码 3 设置 边框 的 宽度 为 2px* / 
#div2{ 
position: absolute; 
top: S50px; 
left:210px; 
height: 100px; 
width: 150px; 
【代码 9]/* 代码 4 设置 边框 的 风格 为 双 实 线 * / 
【代码 5]/* 代码 5 设置 边框 的 颜色 为 蓝 色 * / 
【代码 6]/* 代码 6 设置 边框 的 宽度 为 4px* / 
i 


</style> 
< /head> 
<body> 
<div id= "divl"> 
第 一 个 层 的 内 容 
</div> 
<div id="div2"> 
第 二 个 层 的 内 容 
</div> 
< /body> 
</htm> 
3. 任务 小 结 或 知识 扩展 


在 CSS 中 使 用 border 属性 设置 表格 的 边框 时 ,仅仅 对 表格 的 外 边框 有 效 。 表 格 标记 
table 有 自己 的 属性 border,border 值 大 于 0 显示 边框 ,border 值 等 于 0 隐藏 边框 。 


4 代码 模板 的 参考 答案 


【代码 1]: border- style: dotted; 
【代码 3]: border- color: green; 


【代码 习 : border- width: 2px 
【代码 4]: border- style: double; 
【代码 5]: border- color: blue; 
【代码 6]: border- width: 4px 


1194 实践 环节 
将 examplel1_9. html 中 的 边框 单个 属性 综合 成 边框 复合 属性 (border) 。 


11.10” 边 距 与 间隙 属性 
边 距 属性 用 来 设置 页 面 中 一 个 元 素 所 占 空间 的 边缘 到 相 邻 元 素 之 间 的 距离 。 间 隙 属性 
用 来 设置 边框 和 元 素 内 容 之 间 的 距离 。 
11.1Q1 核心 知识 


1. 单 边 距 属性 (margin-left、 margirrrightmargirtop 以 及 margin-bottom) 
单 边 距 属 性 用 来 设 定 元 素 的 某 个 边 距 的 宽度 。 示 例 代码 如 下 : 


.myClass{ 
margin- left: 2cm; 
margin- right: lcm; 
margin- top: 2cm; 
margin- bottom: 3cm 
} 


2 复合 边 距 属性 (margin) 

该 属性 是 设 定 边 距 宽度 的 一 个 快捷 的 复合 写法 ,用 这 个 属性 可 以 同时 设 定 上 下 左右 边 
距 属性 。 可 以 为 上 下 左右 边 距 设置 相同 的 宽度 。 示 例 代码 如 下 : 

.myClass{ 


margin: lcm; 


} 
也 可 以 分 别 设置 边 距 , 顺 序 是 上 、 右 、 下 、 左 。 示 例 代码 如 下 : 


.myClass{ 
margin: lcm 2cm 3cm 4cm; 


} 


3. 单 间隙 属性 (padding-left、padding-right、 padding-top 以 及 padding-bottom) 
单间 际 属性 用 来 设 定 元 素 内 容 到 某 个 边界 的 宽度 。 示 例 代码 如 下 : 


.myClasst{ 
padding- left: 2cm; 
padding- right: lom; 
Padding- top: 2cm; 
padding- bottom: 3cm 
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> 4 复合 间隙 属性 (padding) 
该 属性 是 设 定 间隙 宽度 的 快捷 的 复合 写法 ,用 这 个 属性 可 以 同时 设 定 上 下 左右 间隙 属 
性 。 可 以 为 上 下 左右 间隙 设置 相同 的 宽度 。 示 例 代 码 如 下 : 


.myClass{ 
padding: lcm; 
} 


也 可 以 分 别 设置 间 际 ,顺序 是 上 、 右 、 下 、 左 。 示 例 代码 如 下 : 


-myClass{ 
padding: lcm 2cm 3cm 4cm; 
} 


11.102 能 力 目标 
理解 并 掌握 边 距 与 间 阶 属性 的 设置 方法 。 
11.103 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 examplel1_10. html, 具 体 要 求 如 下 : 

。 页面 中 有 个 两 行 两 列 的 表格 ,表格 左边 距 与 上 边 距 都 为 1cem, 单 元 格 的 内 容 上 、 下 、 
左 、 右 间 院 都 为 lem; 

。 网 页 运行 效果 如 图 11. 10 所 示 。 
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2 任务 的 代码 模板 


将 下 列 examplel1_10. html 中 的 [代码 替换 为 程序 代码 。 
examplell_10. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> examplell 10.html< /title> 
< style type= "text/css"> 


【代码 11/* 代码 1 设置 单元 格 的 上 间隙 为 lcm* / 

【代码 3/* 代码 2 设置 单元 格 的 下 间隙 为 lcm* / 

【代码 习 /* 代码 3 设置 单元 格 的 左 间隙 为 Immx / 

【代码 9]/* 代码 4 设置 单元 格 的 右 间隙 为 lcm* / 
上 


table{ 


< /st: 


【代码 5]/* 代码 5 设置 表格 的 左边 距 为 lcm* / 
【代码 可 /* 代码 6 设置 表格 的 上 边 距 为 lcmx / 
border- collapse: collapse /* 相 邻 边框 被 合并 * / 
下 
yle> 


< /head> 


<body> 


<table border=1> 


<tr> 
<td> 第 一 行 第 一 个 单元 格 < /td> 
<td> 第 一 行 第 二 个 单元 格 < /td> 

</tr> 

<tr> 
<td> 第 二 行 第 一 个 单元 格 < /td> 
<td> 第 二 行 第 二 个 单元 格 < /td> 


</tr> 


</table> 
< /body> 


</html> 


3. 任务 小 


边 距 与 间隙 属性 值 可 以 是 百分比 ,百分比 是 基于 父 对 象 的 宽度 或 高 度 。 


\ 结 或 知识 扩展 


4 代码 模板 的 参考 答案 


【代码 1]: 
【代码 2]: 
【代码 习 : 
【代码 4]: 


padding- top: lcm; 
padding- bottom: lcm; 
padding- left: lcm; 
padding- right: lcm 


【代码 5]: margin- left: lcm; 
【代码 6]: margin- top: lcom; 
11.104 “实践 环节 
将 examplell_10. html 中 的 边 距 与 间隙 单个 属性 综合 成 复合 属性 。 


11.11 列表 属性 


11.11.1 核心 知识 


1. 列表 样式 类 型 属性 (liststyle-type) 
该 属性 用 来 设 定 列表 项 标记 的 类 型 。 可 以 取 值 : disc( 默 认 值 , 黑 圆 点 ) circle( 空 心 圆 
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点 ) square( 小 黑 方块 ) decimal( 数 字 排 序 ) ,lower-roman( 小 写 罗 马 字 排序 )、upper-roman 
(大 写 罗 马 字 排 序 ) lower-alpha( 小 写字 母 排序 ) .upperalpha( 大 写字 母 排序 ) .none( 无 列 
表 项 标记 ) 。 示 例 代码 如 下 : 
.myList{ 
list- style- type: decimal 
} 


2 列表 样式 位 置 属性 (list-style-position) 

该 属性 用 来 设 定 列表 的 对 齐 方式 。 可 以 取 值 : outside( 以 列表 项 内 容 为 准 对 齐 ) 和 
inside〈 以 列表 项 标记 为 准 对 齐 ) 。 示 例 代码 如 下 : 

.myList{ 


list- style- position: inside 


' 


3. 项目 符号 图 像 属性 (liststye-image) 
列表 项 目 符号 可 以 用 图 片 来 表示 ,用 项 目 符号 图 像 属 性 来 设 定 图 片 。 示 例 代码 如 下 : 
myList{ 


list- style- image: url(../images/listImg.gif) 
} 


4 列表 样式 复合 属性 (list-style) 
该 属性 是 设 定 列表 样式 的 快捷 的 复合 写法 。 用 这 个 属性 可 以 同时 设 定 列表 样式 类 型 属 
性 (list-style-type) ,列表 样式 位 置 属性 (list-style-position) 和 项 目 符号 图 像 属性 (list-style- 
image) 。 示 例 代码 如 下 : 
.myList { 
list- style: decimal inside url (../images/listImg.gif) 
} 


1t.112 能 力 目标 
理解 并 掌握 列表 属性 的 设置 方法 。 


11.113 任务 驱动 


1. 任 务 的 主要 内 容 

编写 网 页 examplell_11. html, 具 体 要 求 如 下 : 

。 页 面 中 有 个 无 序列 表 , 列 表 项 目 符号 图 像 为 left. gif, 列 表 样式 位 置 以 列表 项 标记 为 
准 对 齐 ; 

。 网 页 运行 效果 如 图 11. 11 所 示 。 

2 任务 的 代码 模板 

将 下 列 examplell_11. html 中 的 [代码] 替换 为 程序 代码 。 
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图 11.11 CSS 列表 属性 


examplell_11. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>examplell 11.html< /title> 
< style type= "text/css"> 
.myList{ 
【代码 11/* 代码 1 设置 项 目 符号 图 像 为 left.gif* / 
【代码 2]/* 代码 2 设置 列表 样式 位 置 以 列表 项 标记 为 准 对 齐 * / 
} 
</style> 
< /head> 
<body> 
<ul class= "myList"> 
<1i> 增 加 信息 < /1i> 
<1i> 修 改 信息 < /1i> 
<1i> 查 询 信息 < /1i> 
<1i> 删 除 信息 < /1i> 
</ul> 
</body> 
</html> 


3. 任 务 小 结 或 知识 扩展 
给 列表 添加 项 目 符号 图 像 时 ,要 注意 图 像 的 尺寸 大 小 适合 列表 。 
4 代码 模板 的 参考 答案 


【代码 1]: 1ist- style- image: url (left.gif); 
【代码 3] : list- style- position: inside 


11114: 实践 环节 


将 examplell_11. html 中 的 单个 列表 属性 综合 成 复合 列表 属性 (list-style)。 
11.12 常见 的 DIV 十 CSS 布局 类 型 


DIV 十 CSS 布局 是 当前 网 页 布局 中 最 流行 的 类 型 之 一 。 


TIC1 


核心 知识 


1.DV 


DIV 是 一 个 放置 内 容 的 容器 ,用 于 大 面积 、 大 区 域 的 块 状 排 版 ,样式 需要 编写 CSS 来 实 


现 。 示 例 代码 如 下 : 


<html> 


<head> 


<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 


<title>div cssl< /title> 
< style type= "text/css"> 
-mainBox { 


i 


border: lpx dashed # 0099CC; 
margin: 3px; 

padding: Opx; 

float: left; 

height: 300px; 

width: 192px; 


-mainBox h3 { 


} 


float: left; 

height: 20px; 

width: 179px; 

Color: #FFFFFF; 

padding: 6px 3px 3px 10px; 
background- color: #0099Cc; 
font- size: 16px; 


.mainBox P { 


和 


line- height: 1.5em; 
text- indent: 2em; 
margin: 35px 5px 5px 5px7 


</style> 
</head> 
<body> 


<div class= "mainBox"> 
<h3> 前 言 </h3> 
<p> 正 文 内 容 < /p> 

</div> 

<div class= "mainBox"> 
<h3> CSS 盒子 模式 < /h3> 
<p> 正 文 内 容 < /p> 

</div> 

<div class= "mainBox"> 
<h3> 转 变 思想 < /h3> 
<p> 正 文 内 容 < /p> 

</div> 


上 述 代码 运行 效果 如 图 11. 12 所 示 。 
图 [| 区] 


图 11.12 div 示例 


2 一列 固定 
宽度 的 属性 值 是 固定 像素 ,无 论 怎 样 改变 浏览 器 窗口 大 小 ,DIV 的 宽度 都 不 改变 。 示 
例 代码 如 下 : 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>div css2< /title> 
<style type= "text/css"> 
.oneFixed { 
border: lpx dashed # 0099CC; 
background- color: cyan; 
height: 300px; 
width: 300px 
} 
</style> 
< /head> 
<body> 
<div class= "oneFixed"> 
1 列 固 定 宽度 
</div> 
</body> 
</html> 


上 述 代码 运行 效果 如 图 11. 13 所 示 。 


3. 两 列 固定 宽度 
两 列 的 布局 需要 用 到 两 个 DIV .宽度 的 属性 值 是 固定 像素 。 示 例 代码 如 下 : 


11.13 一 列 固定 宽度 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>div css3< /title> 
< style type= "text/css"> 
#1eft { 
border: lpx dashed # 0099CC7 
background- color: cyan; 
height: 200px; 
width: 300px; 
float: left 
, 
#right{ 
border: lpx dashed #0099CC; 
background- color: LightSkyBlue; 
height: 200px; 
width: 300px; 
float: left 
} 
</style> 
< /head> 
<body> 
<div id="left"> 
左边 
</div> 
<div id="right"> 
右边 
</div> 
< /body> 
</html> 


上 述 代 码 运 行 效果 如 图 11. 14 所 示 。 


图 11.14 两 列 固定 宽度 


4 三 列 浮动 中 间 宽 度 自 适 应 
三 列 浮动 中 间 宽 度 自 适应 就 是 要 求 左边 DIV 固定 宽度 且 左 显示 ,右边 DIV 固定 宽度 
且 右 显示 ,中 间 DIV 根据 左右 DIV 的 间距 变化 宽度 自 适应 。 示 例 代码 如 下 : 


<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 

<title>div css4< /title> 

< style type= "text/css"> 

body{ 
margin: Opx 

} 

#1left { 
border: lpx solid #0099Cc; 
background- color: cyan; 
height: 300px; 
width: 100px; 
position: absolute; 
top: Opx; 
left: Opx 

# 

#center{ 
border: lpx solid # 0099CC; 
background- color: #7FFFAA; 
margin- left: 100px; 
margin- right: 100px; 
height: 300px 

} 

#right{ 
border: lpx solid #0099Cc; 
background- color: cyan; 
height: 300px; 
width: 100px; 
position: absolute; 
right: Opx; 
top: Opx 
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} 
</style> 
< /head> 
<body> 
<div id="left"> 
左边 
</div> 
<div id= "center"> 
中 间 自 适应 
</div> 
<div id="right"> 
右边 
</div> 
< /body> 
</html> 


上 述 代 码 运 行 效果 如 图 11. 15 所 示 。 
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11.15 三 列 浮动 中 间 宽 度 自 适应 


5 三 行 二 列 居 中 高 度 自 适应 

三 行 二 列 居中 高 度 自 适应 就 是 要 求 整个 网 页 内 容 居中 ,第 一 行 DIV 固定 高 度 且 居 顶 端 
显示 ,第 三 行 DIV 固定 高 度 且 居 底 端 显示 ,中间 DIV 根据 内 容 的 变化 高 度 自 适应 。 示 例 代 
码 如 下 : 


<html> 
<head> 
<meta http- equiv= "Content— Type" content= "text/html;charset=UTF- 8"> 
<title>div css5< /title> 
<style type= "text/css"> 
body { 
background: #999; 
text- align: center; 
Color: #333; 


font- family: arial, verdana, sans- serif; 


#header { 


width: 776px; ~ 
margin- right: auto; 

margin- left: auto; 

padding: Opx; 

background: #EEE; 

height: 60px; 

text-align: left; 


#contain { 
margin- right: auto; 
margin- left: auto; 
width: 776px; 


#mainbg { 
width: 776px; 
padding: Opx; 
background: #60A179; 
float: left; 


#right { 
float: right; 
margin: 2px Opx 2px Opx; 
padding: Opx; 
width: 574px; 
background: #ccd2de; 
text- align: left; 


#1eft { 
float: left; 
margin: 2px 2px Opx Opx; 
padding: Opx; 
background: #F2F3F7; 
width: 200px; 
text- align: left; 


#footer { 
clear: both; 
width: 776px; 
margin- right: auto; 
margin- left: auto; 
padding: Opx; 
background: #EEE; 
height: 60px; 


-text { 
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= margin: Opx; 
padding: 20px; 
} 
</style> 
</head> 
<body> 


<div id= "header">header< /div> 
<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 
<div class= "text"> 
right 
<p>1< /p> 
<p>1</p> 
<pP>1</p> 
<pP>1</p> 
<p>1</p> 
</div> 
</div> 
<div id= "left"> 
<div class= "text"> left< /div> 
</div> 
</div> 
</div> 
<div id= "footer"> footer< /div> 
< /body> 
</html> 


上 述 代 码 运 行 效果 如 图 11. 16 所 示 。 
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11.16 三 行 二 列 居中 高 度 自 适 应 


理解 并 掌握 常见 的 DIV 十 CSS 布局 类 型 。 


任务 驱动 


1 任务 的 主要 内 容 

编写 网 页 examplel1_12. html, 具 体 要求 如 下 : 

。 页 面 中 有 4 个 div 分 别 为 top \left right bottom, 它 们 都 采用 绝对 定位 ; 

。 在 右边 (right)div 中 有 个 iframe; 

。 在 左边 (left)div 中 有 个 4 行 1 列 的 表格 ,每 个 单元 格 中 有 个 无 下 画 线 的 超 链 接 ; 
。 单 击 左边 div 中 的 超 链 接 后 ,把 链接 的 目标 页 面 显示 在 右边 div 中 的 iframe 里; 
。 网 页 运行 效果 如 图 11. 17 所 示 。 


图 11.17 DIV 十 CSS 二 iframe 布局 


2 任务 的 代码 模板 
将 下 列 examplell_12. html 中 的 【代码 】 蔡 换 为 程序 代码 。 
examplell_12. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> 信 息 管理 主 画 面 < /title> 
< style type= "text/css"> 
#top { 
【代码 1]/* 代码 1 设置 绝对 定位 x* / 
top: Opx; 
left: 200px; 
right: auto; 
bottom: auto; 
background- color: SkyBlue; 
border: lpx solid # ff33997 
width: 700px; 
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height: 100px; 

text- align: center; 

【代码 2]/* 代码 2 设置 字体 类 型 为 “华文 新 魏 ”* / 
【代码 33/* 代码 3 设置 字体 大 小 为 30px* / 


#1left { 
float: left; 
position: absolute; 
top: 100px; 
left: 200px; 
right: auto; 
bottom: auto; 
background- color: LightCyan; 
border: 1px solid #9400D3; 
width: 150px; 
height: 400px 


#right { 
float: right; 
position: absolute; 
top: 100px; 
left: 350px; 
right: auto; 
bottom: auto; 
background- color: #FFB6C1; 
border: 1px solid #EE1289; 
width: 550px; 
height: 400px 


#bottom { 
position: absolute; 
top: 500px; 
left: 200px; 
right: auto; 
bottom: auto; 
background- color: SkyBlue; 
border: 1px solid # DAA520; 
width: 700px; 
height: 50px; 
text-align: center 
和 
af 


【代码 4]/* 代码 4 设置 文本 无 下 画 线 * / 


</style> 
</head> 
<body> 


<div id- "top"> rr 
<br> 
欢迎 陈 恒 使 用 地 址 簿 管理 系统 
<br> 

</div> 


<div id- "left"> 
<table> 
EES 
<td><a hre 全 "add.html" target= "rightFrame"> 添 加 朋友 < /a>< /td> 
</tr> 
<tr> 
<td><a href="update.html" target="rightFrame"> 修 改 信息 </a></to> 
</tr> 


<tr> 
<td><a href="delete.html" target="rightFrame"> 删 除 朋 友 </a>< /to> 
</tr> 


<tr> 
<td><a href="query.html" target="rightFrame"> 查 询 朋 友 </a></to> 
</tr> 


</table> 
</div> 


<div id= "right"> 
<iframe src= "query.html" name= "rightFrame" width= "100%" height= 
"100%" frameborder="0">< /iframe> 

</div> 


<div id= "bottom"> 
<br> 
&copy; 版 权 归 清华 大 学 出 版 社 所 有 
<br> 
</div> 
< /body> 
</html> 


add. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>add.html< /title> 
</head> 
<body> 
添加 朋友 信息 
< /body> 
</html> 
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update. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>update.html< /title> 
</head> 
<body> 
修改 朋友 信息 
< /body> 
</html> 


delete. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> delete.html< /title> 
< /head> 
<body> 
删除 朋友 信息 
< /body> 
</html> 


query. html 


<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> query.html< /title> 
< /head> 
<body> 
查询 朋友 信息 
< /body> 
</htm> 


3. 任 务 小 结 或 知识 扩展 

真正 使 用 div 布局 ,要 把 页 面 的 内 容 和 表现 完全 分 离开 ,在 页 面 的 内 容 部 分 不 应 该 出 现 
表现 控制 标记 ,如 font、color、height、width、align 等 标记 。 

使 用 DIV 十 CSS 布局 网 页 的 思路 : 

。 用 div 来 定义 结构 

。 使 用 CSS 来 美化 网 页 

。 在 div 定义 的 区 域内 加 入 内 容 


4 代码 模板 的 参考 答案 


【代码 1】: position: absolute; 
【代码 3]: font- family: 华文 新 魏 ; 
【代码 3]: font- size: 30px 

【代码 名 : text- decoration: none 
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按照 下 面 的 步骤 编写 网 页 practicel1_12. html。 

步骤 1: 使 用 DIV 定义 结构 。 

一 个 典型 的 版 面 分 栏 结构 : 页 头 、 导 航 栏 . 内 容 、 版 权 。 
结构 代码 : 


<div id= "header">< /div> 
<div id= "navigator">< /div> 
<div id= "content">< /div> 
<div id= "footer">< /div> 


把 这 四 个 盒子 装 进 一 个 更 大 的 盒子 body 中 ,如 下 : 


<body> 
上 面 四 行 代码 
< /body> 


步骤 2: 定义 body 的 属性 。 


body { 
font- family: Arial, Helvetica, sans- serif; 
font- size: 12px; 
margin: Opx auto; 
height: auto; 
width: 800px; 
border: lpx solid #006633; 
} 


步骤 3: 定义 页 头 (header) 的 属性 。 


#header { 
height: 100px; 
width: 800px; 


background- image: url (plane.jpg); 
background- repeat: no- repeat; 
margin: Opx Opx 3px Opx; 

} 


步骤 4: 定义 导航 栏 (navigator) 的 属性 。 


#navigator { /* 定义 一 个 导航 栏 的 长 盒子 * / 
height: 25px; 
width: 800px; 
font— size: 14px; 
list- style- type: none; /* 让 nav 这 个 大 盒子 下 面 的 小 盒子 IT 列表 样式 不 显示 ,这 对 于 
标准 浏览 器 很 重要 * / 
} 


#navigator 1i { 
float: left;/#* 让 II 这 些小 盒子 左 对 齐 * / 
} 
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#navigator lia{ 
color: #000000; 
text- decoration: none; 。” /* 让 II 盒子 里 面 的 链接 样式 没有 下 画 线 * / 
padding- top: 4px; 
display: block; /#* 让 II 里 面 的 链接 块 状 呈 现 , 就 像 一 个 按钮 ,而 不 必 一 定 要 点 中 链接 文字 
才 起 作用 * / 
width: 131px; 
height: 22px; 
text- align: center; 
background- color: #009966; 
margin- left: 2px; 


#navigator li a:hover { 
background- color: #006633; 。 ”/* 鼠标 移 到 链接 盒子 上 面 改 变 盒子 背景 色 * / 
Color: #FFFFFF; 

} 


步骤 5: 定义 内 容 部 分 (content) 的 属性 。 


#content { 
height: auto; 
width: 780px; 
line- height: 1.5em; 
padding: 10px; 


#content p { 
text- indent: 2em; 


#content h3 { 
font- size: 16px; 
margin: 10px; 
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步骤 6: 定义 页 脚 (footer) 的 属性 。 


#footer { 
height: 50px; 
width: 780px; 


line- height: 2em; 
text- align: center; 
background- color: #009966; 
padding: 10px; 

} 


步骤 7: 定义 各 标记 的 边界 和 填充 (开头 处 ) 。 


margin: Opx; 


padding: Opx; 
} 


步骤 8: 结构 代码 如 下 : 


<body> 
<div id-= "header">< /div> 
<div id= "navigator"> 
<ul id= "navigator"> 
<1li><a hre 人 =" 嘲 "> 首 页 </a></1i> 
<1li><a hre 人 =" 嘲 "> 文 章 </a></1i> 
<1li><a href=#"> 相 册 </a>< /1i> 
<li><a href="#">Blog< /a></li> 
<1li><a href= 叶 "> 论坛 </a>< /li> 
<1li><a href= 哇 "> 帮助 </a></li> 
</ul> 
</div> 
<div id= "content"> 
<h3> 前 言 </h3> 
<p>CSsS 是 英文 cascading Style Sheet 的 缩写 ,又 称 为 “ 层 伙 样式 表 ”, 简 称 为 样式 表 。 它 是 
W3c 定 义 的 标准 ,一 种 用 来 为 结构 化 文档 (如 HTML 文 档 ) 添 加 样式 (字体 、 间 距 和 背景 等 ) 
的 计算 机 语言 。< /p> 
<h3> 理 解 DIV+ css 布局 < /h3> 
<p> 简 单 地 说 DIV+ css (DIV css) 被 称 为 “wEB 标准 ”中 常用 术语 之 一 。 首 先 认 识 DIV 是 用 于 
搭建 html 网 页 结构 (框架 ) 的 标签 ,再 认识 css 是 用 于 创建 网 页 表现 (样式 /美化 ) 的 样式 
表 统 称 ,通过 css 来 设置 div 标 签 样 式 ,这 一 切 我 们 常常 称 之 为 div+ css。 
</p> 
</div> 
<div id= "footer"> 
<p> 关 于 | 广告 服务 | 招聘 1 客服 中 心 | & 8 留言 | 网 站 管理 | 会 员 登 录 | 购物 车 < /p> 
<p>Copyright (c) 清 华 大 学 出 版 社 < /p> 
</div> 
< /body> 


步骤 9: 页 面 运 行 效果 如 图 11. 18 所 示 。 


英文 Cascading She Sheeg 纺 写 ， 又 称 为 ,是 得 样式 表 "， 简称 为 样式 表 。 它 是 W3C 定 义 的 标准 ， 一 种 用 未 为 结构 化 文档 ( 如 HTML 广 
1 
理解 DIV+CSS 布 局 


简单 地 说 DIV+CSS(DIV tg rr 首先 认识 DIV 是 用 于 大 村 html 网 页 结构 ( 椎 染 ) 的 标签 ， 再 认识 CSS 是 用 于 创建 
网 页 表现 ( 祥 式 庚 化 的 样式 表 统 称 ， 通 过 css 来 设置 dh 标 答 祥 式 ， 这 一 切 我 们 常 寅 称 之 为 


图 11.18 DIV 十 CSS 布局 
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11.13 小 结 


CSS 的 语法 由 三 部 分 构成 : 选择 符 (selector)、 属 性 (property) 和 属性 值 (value)。 选 择 
符 分 为 : 普通 选择 符 、 类 选择 符 和 id 选择 符 。 

在 网 页 中 使 用 CSS 有 三 种 方式 : 内 器 样式 、 内 部 样式 和 外 部 样式 。 使 用 style 作为 标记 
的 属性 进行 内 嵌 样 式 的 设置 ;在 二 head>.… 志 /head> 里 面 使 用 过 style> 标 记 进行 内 部 样式 
的 设置 ;通过 HTML 的 link 元 素 进行 外 部 样式 的 设置 。 

CSS 的 常用 属性 有 : 字体 、 文 本 、 背 景 .定位 .边框 , 边 距 、 间 际 以 及 列表 等 。 
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1. 下 面 对 于 样式 表 的 说 法 中 错误 的 是 ( % 
A. CSS 就 是 Cascading Style Sheets ,中文 翻 译 为 “ 层 释 样式 表 ”, 简 称 样式 表 
B. 将 CSS 指定 的 格式 加 入 到 HTML 中 的 方法 有 两 种 
C. 外 部 链接 CSS 时 需要 在 HTML 文件 里 加 一 个 超级 链接 ,连接 到 外 部 的 CSS 
文档 
D. 内 定义 CSS 时 需要 在 HTML 文件 内 的 二 head>.…< 王 /head 过 标签 之 间 加 一 段 
CSS 的 描述 内 容 
2. 下 面 对 于 样式 表 的 说 法 中 错误 的 是 ( » 
A. CSS 的 定义 由 三 个 部 分 构成 : 选择 符 (selector) 、 属 性 (properties) 和 属性 的 取 值 
(value) 
B. 选择 符 可 以 是 多 种 形式 ,一 般 是 要 定义 样式 的 HTML 标记 ,可 以 通过 此 方法 定 
义 它 的 属性 和 值 , 属 性 和 值 要 用 逗号 隔 开 
C. CSS 可 以 定义 字体 属性 
D. CSS 可 以 定义 颜色 和 背景 属性 
3. 下 列 说 法 中 错误 的 是 ( » 
A. p {font-family:"sans serif"} 定 义 段 落 字体 为 sans serif 
B. p {text-align: center; color: red} 定 义 段 落 居中 排列 ,并 且 段 落 中 的 文字 为 红色 
C. background-image 属性 用 来 设置 背景 图 片 
D. background-color 属性 用 来 设置 背景 颜色 
4. 简 述 常见 的 DIV 十 CSS 布局 类 型 。 


* 地 址 秒 网 站 的 布局 


本 章 通 过 一 个 小 型 的 地 址 迁 网 站 ,讲述 如 何 采用 DIV 十 CSS 进行 网 站 的 前 台布 局 设计 。 
12.1 网 站 功能 需 3 


地 址 簿 网 站 是 针对 注册 用 户 使 用 的 。 网 站 提供 的 功能 如 下 。 

(1) 非 注册 用 户 可 以 注册 为 注册 用 户 。 

(2) 成 功 注册 的 用 户 , 可 以 登录 。 

(3) 成 功 登 录 的 用 户 , 可 以 添加 、 修 改 、 删 除 以 及 浏览 自己 的 朋友 信息 。 
(4) 成 功 登录 的 用 户 , 可 以 修改 自己 的 登录 密码 。 


12.2 网 站 内 容 设 计 


注册 用 户 使 用 地 址 簿 网 站 可 以 添加 修改 ,删除 以 及 查询 自己 的 朋友 信息 ,具体 的 内 容 如 下 。 


1 用 户 注册 
新 用 户 填写 注册 信息 ,包括 用 户 名 、 密 码 、 确 认 密 码 、. 身 份 证 号 码 性别、 住址 .邮编 .邮箱 
以 及 生日 等 。 


2 用 户 登 录 

用 户 输入 用 户 名 、 密 码 进 行 登录 。 登 录 成 功 ,进入 网 站 主页 面 ,包括 网 页 头 部 、 导 航 栏 、 
内 容 以 及 页 脚 等 。 

3. 添 加 朋友 信息 

用 户 填 写 朋 友信 息 表单 ,包括 朋友 姓名 、 生 日 .电话 、E-mail、 地 址 以 及 关系 等 信息 。 提 
交 朋 友信 息 表单 时 ,系统 使 用 JavaScript 验证 信息 是 否 输入 以 及 信息 格式 是 否 合 法 。 

4. 修改 朋友 信息 

网 站 首先 根据 成 功 登录 的 用 户 名 查询 出 该 用 户 的 所 有 朋友 信息 ,然后 用 户 选 择 某 个 朋 
友 进 行 信息 修改 。 

5 删除 朋友 信息 

网 站 首先 根据 成 功 登 录 的 用 户 名 查询 出 该 用 户 的 所 有 朋友 信息 ,然后 用 户 选 择 某 个 或 
多 个 朋友 进行 删除 。 
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6. 查询 朋友 信息 
网 站 根据 成 功 登录 的 用 户 名 查询 出 该 用 户 的 所 有 朋友 信息 。 


7. 修 改 密码 
成 功 登录 的 用 户 , 从 主页 面 进入 该 页 面 修改 自己 的 密码 。 


8. 退出 系统 
成 功 登录 的 用 户 ,在 主页 面 单 击 安全 退出 链接 , 回 到 登录 页 面 。 


12.3 网 站 首页 的 布局 设计 


根据 设计 要 求 ,将 网 站 首页 (index. html) 从 上 到 下 分 成 两 个 区 域 top 和 bottom。 首 页 
的 布局 规划 如 图 12. 1 所 示 。 


图 12.1 首页 的 布局 规划 


网 站 中 用 到 的 CSS 文件 有 common. css、commonl. css 和 common2. css。 在 首页 中 导 
入 common. css 文件 ,首页 的 代码 如 下 : 
index. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> index.html< /title> 
<link href= "css/common.css" type= "text/css" rel= "stylesheet"> 
< style type= "text/css"> 
#top { 
position: relative; 
top: Opx; 
Jeft: Opx; 
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right: auto; Bi 
bottom: auto; 
background- color: SkyBlue; 
width: 800px; 
height: 100px; 
} 
#top hl{ 
text-align: center; 
font- family: 华文 彩云 ; 
color: #000000; 
font- size: 30px; 
} 
#top af 
font- family: Times New Roman; 
text- align: right; 
font- size: 14px; 
color: #000000; 
text- decoration: none; 
} 
#top a:hover { 
background- color: #006633; 
Color: #FFFFFF; 
} 
#bottom{ 
position: relative; 
top: Opx; 
left: Opx; 
right: auto; 
bottom: auto; 
width: 800px; 
} 
</style> 
< /head> 
<body> 
<div id="top"> 
<br><br> 
<hl> 欢 迎 您 进入 该 网 站 !< /hl> 
<br> 
<a href="login.html"> 登 录 < /a><a href="register.html"> 注 册 </a> 
</div> 
<div id= "bottom"> 
<img alt="" src= "images/world1.jpg"> 
</div> 
< /body> 
</htm> 


common. css 
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body { 
font- family: Arial, Helvetica, sans- serif; 
font- size: 12px; 
margin: Opx auto; 
height: auto; 
width: 800px; 
border: lpx solid #006633; 
} 


commonl. css 


汪 是 
margin: Opx; 
padding: Opx; 
+ 
body { 


font- family: Arial, Helvetica, sans- serif; 
font- size: 12px; 
margin: 10px 10px auto; 
background- image: url (../images/bb.jpg) 
} 


common2. css 


人 
margin: Opx; 
padding: Opx; 
} 
body { 
font- family: Arial, Helvetica, sans- serif; 
font- size: 12px; 
margin: Opx auto; 
background- image: url(../images/bb.jpg) 


Color: #000000; 
text- decoration: none; 
} 
a:hover { 
background- color: #006633; 
Color: #FFFFFF; 


12.4 网 站 主页 的 布局 设计 


网 站 的 主页 是 网 站 的 门面 ,要 设计 得 简洁 、 大 方 ,在 主页 上 显示 出 网 站 的 主要 栏目 。 将 
主页 从 上 到 下 分 成 页 头 (header)、 导 航 栏 Cnavigator)、 内 容 (Ccontent) 和 版 权 (footer) 四 部 
分 ,结构 代码 如 下 : 
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<body> er 
<div id= "header"></div> 
<div id= "navigator">< /div> 
<div id= "content">< /div> 
<div id= "footer">< /div> 
< /body> 


导航 栏 和 内 容 的 联系 : 单 击 导航 栏 中 的 链接 ,把 目标 页 面 显示 在 内 容 部 分 中 。 因 此 ,在 
内 容 部 分 中 使 用 了 iframe,iframe 的 默认 页 面 是 查询 信息 页 面 (query. html)。 主 页 的 布局 
规划 如 图 12. 2 所 示 。 
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图 12.2 主页 的 布局 规划 


在 主页 中 导入 common. css 文件 ,主页 的 代码 如 下 : 


main. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>main.html< /title> 
<link href="css/common.css" type= "text/css" rel= "stylesheet"> 
<style type= "text/css"> 


#header { 
height: 90px; 
width: 800px; 


background- image: url (images/bb.jpg); 
margin: Opx Opx 3px Opx; 
和 
#header hl{ 
text- align: center; 
font- family: 华文 彩云 ; 
color: #000000; 
font- size: 30px; 
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#navigator { 
height: 25px; 
width: 800px; 
font- size: 14px; 
list- style- type: none; 


#navigator 1i { 
float: left; 


#navigator liaf{ 
color: #000000; 
text- decoration: none; 
padding- top: 4px; 
display: block; 
width: 13lpx; 
height: 22px; 
text- align: center; 
background- color: PaleGreen; 
margin- left: 2px; 


#navigator 1i a:hover { 
background- color: #006633; 
Color: #FFFFFF; 

#content { 
height: auto; 
width: 780px; 
padding: 10px; 

} 

#content iframe{ 
height: 300px; 
width: 780px; 

} 

#footer { 
height: 30px; 
width: 780px; 
line- height: 2em; 
text- align: center; 
background- color: PaleGreen; 
padding: 10px; 

下 

</style> 

</head> 

<body> 
<div id= "header"> 

<br><br> 
<hl> 欢 迎 您 进入 主页 面 !< /hl> 
</div> 
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<div id- "navigatorn> 
<ul id= "navigator"> 
<1i><a href= "query.html" target= "center"> 查 询 朋 友信 息 < /a></1li> 
<1i><a href= "add.html" target= "center"> 添 加 朋友 信息 < /a>< /1i> 
<1i><a href= "update.html" target= "center"> 修 改 朋友 信息 < /a>< /1i> 
<1i><a href= "delete.html" target= "center"> 删 除 朋 友信 息 </a>< /1i> 
<1i><a href="updatepassword.html"> 修 改 个 人 密码 < /a>< /1i> 
<1i><a href="index.html"> 安 全 退出 系统 < /a>< /1i> 
</ul> 
</div> 
<div id= "content"> 
<iframe src="query.html" name= "center" frameborder="0">< /iframe> 
</div> 
<div id= "footer">Copyright @ 清 华 大 学 出 版 社 < /div> 
< /pody> 
</html> 


12.5 网 站 其 他 页 面 的 布局 设计 


把 首页 和 主页 进行 详细 的 布局 设计 后 , 接 下 来 对 各 个 网 页 进行 具体 的 设计 。 


1. 登录 页 面 GE 
为 了 页 面 的 整 休 美观 ,登录 页 面 中 使 用 了 图 像 域 (“确定 "和 * 取 ”|es, rez 二 

消 "按钮 )。 登 录 页 面 的 布局 规划 如 图 12. 3 所 示 。 _ rrr 
在 登录 页 面 中 导入 commonl. css 文件 ,登录 页 面 的 代码 如 下 : 
login. html 图 12.3 登录 页 面 的 


布局 规划 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4. 01 Transitional//EN" " 
http://www.w3.0org/TR/html4/lo0se.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> login.html< /title> 
<link href= "css/commonl.css" type= "text/css" rel="stylesheet"> 
<style type= "text/css"> 
table{ 
text- align: center 
} 
.textSizet 
width: 120px; 
height: 15px 


</style> 
< script type= "text/javascript"> 
// 确 定 按钮 
function gogo(){ 

document .forms [0] .submit (); 
} 
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// 取 消 按钮 
function cancel (){ 
document .forms [0] .action=""; 
} 
</script> 
< /head> 
<body> 
< form action= "main.html" method= "post"> 
<table> 
<tr> 
<td colspan= "2">< img src= "images/login.gif">< /td> 
</tr> 
ur 
<td> 姓 名 : < /td> 
<td>< input class= "textSize" type= "text" name= "userName" 
value= " 卡 扎 菲 2 号 ">< /td> 
</tr> 
<tr> 
<td> 密 码 : < /td> 
<td><input class= "textSize" type= "password" name= "pwd" 
value= "123456">< /td> 
</tr> 
<tr> 
<td colspan= "2"> 
< input type= "image" src="images/ok.gif" onclick= "gogo()"> 
< input type= "image" src="images/cancel.gif" onclick="cancel ()"> 
</td> 
</tr> 
</table> 
</fom> 
< /body> 
</htm> 


2 注册 页 面 
注册 页 面包 括 用 户 名 、 密 码 .确认 密码 、 身 份 证 号 码 、 性 别 、 住 址 邮编 .邮箱 以 及 生日 
等 注册 信息 。 输 入 注册 信息 后 , 单 击 “ 提 交 ” 按 钮 时 检验 信息 是 否 符合 要 求 。 验 证 规则 
如 下 : 
根据 出 生年 月 日 判断 身份 证 号 码 是 否 合法 (只 考虑 18 位 身份 证 ,验证 日 期 就 可 以 ); 
登录 账号 只 能 是 字母 或 数字 且 以 字母 开头 ; 
密码 要 在 8 位 以 上 上 且 需要 有 字母 和 数字 之 外 的 
字符 ; 
出 生年 月 日 的 格式 为 yyyy-mm-dd; 
邮编 为 6 位 数字 ; 
E-mail 的 基本 格式 验证 即 可 。 
注册 页 面 的 布局 规划 如 图 12. 4 所 示 。 
在 注册 页 面 中 导入 commonl. css 和 wpCalendar. js 文 
件 , 注 册页 面 的 代码 如 下 : 


图 12.4 注册 页 面 的 布局 规划 


register. html 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/ 
loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title> register.html< /title> 
<1link href= "css/commonl1.css" type= "text/css" rel= "stylesheet"> 
<style type= "text/css"> 
.textSizef 
width: 120px; 
height: 15px 
} 
</style> 
< script type= "text/javascript" src= "wpCalendar.js" charset= "GBK">< /script> 
< script type= "text/javascript"> 
// 去 掉 前 后 空格 
function deltrim(x){ 
while(x.length>0 && x.charAt (0)=="" 
x=x.substring (1,x.length); 
while(x.length> 0&&x.charRt (x.length- 1)= 
x=X.substring (0,x.length-— 1); 
return x; 


} 
// 非 空 验证 
function isNull (elem,message){ 
var va=deltriml(elem.value); 
if(va==""){ 
alert (message); 
elem.focus (); 
return false; 
} 
return true; 
} 
// 验 证 账号 
function validateId(){ 
var first=document.forms[0] .id.value.charat (0); 
var exp=/^[a- 20- 9]+$/; 
if(isNull (document.forms[0] .id, "请 输入 账号 ")) { // 验 证 非 空 
// 验 证 首 字符 
if(first>= 'a'rgsfirst<='z'11first>='R'&&gfirst<= "2"'){ 
} 
else{ 
alert ("账号 首 字符 必须 是 字母 1") ; 
document .forms [0] .id. focus (); 
return false; 
} 
if (!exp.test (document .forms[0] .id.value)) { 
alert ("账号 必须 是 字母 或 数字 !") ; 


document .forms [0] .id.focus (); 


页 设计 教学 做 一 体 化 教程 


A return false; 
} 
return true; 
jelsef 
return false; 


} 
// 验 证 密码 
function validatepwd() { 
var exp=/“^[a- 20- 9]+$/; 
if(isNull (document.forms[0] .pwd, "请 输入 密码 ")) { // 验 证 非 空 
if (document.forms [0] .pwd.value.length<=8){ 
alert ("密码 大 于 8 位 "); 
document .forms [0] .pwd. focus (); 
return false; 
jelsef{ 
if (exp.test (document.forms [0] .pwd.value) ){ 
alert ("密码 需要 有 字母 和 数字 之 外 的 字符 !") ; 
document .forms [0] .pwd. focus (); 


return false; 


} 
Jelse{ 
return false; 
} 
if (document .forms [0] .pwd.value!= document .forms[0] .repwd.value) { 
alert ("两 次 密码 不 一 致 !1") ; 
document .forms [0] .pwd.focus (); 
return false; 
} 
return true; 
} 
// 验 证 邮编 
function checkecode (){ 
var exp=/^[0- 9]+$/; 
if (isNull (document.forms[0] .ecode, "请 输入 邮编 ")){ ”// 验 证 非 空 
if (document .forms[0] .ecode.value.length!= 6){ 
alert ("邮编 6 位 "); 
document .forms [0] .ecode.focus (); 
return false; 
lelse{ 
if(!exp.test (document .forms [0] .ecode .value)){ 
alert ("邮编 为 数字 "); 
document .forms [0] .ecode.focus (); 


return false; 


3 
return true; 
Jelse{ 


return false; 


Na 
// 验 证 Email 
function checkemail (){ 
var exp=/^\wt+ ((-\wt)|(\.\wt))* \@[A- Za-z0-9]+ ((\.|-)[A-2a-2z0-9]+)*\. 
[A- 2a- 20- 9]+$/; 
if (isNull (document.forms[0] .email, "请 输入 Email")){ // 验 证 非 空 
if(!exp.test (document.forms[0] .email.value)){ 
alert ("Email 格式 错误 !1"); 
document .forms [0] .email.focus (); 
return false; 
} 
return true; 
Jelse{ 
return false; 


} 
// 验 证 身份 证 
function checkIdenty(){ 
Var bir= document.forms [0] .birthday.value; 
Var ide= document.forms [0] .identy.value; 
var biride=ide.substring(6,10)+"- "+ ide.substring (10, 12)+"- "+ ide. substring (12, 
14); 
if (isNull (document.forms [0] .identy, "请 输入 身份 证 ")){ ”// 验 证 非 空 
if (ide.length!=18){ 
alert ("身份 证 18 位"); 
document .forms [0] .identy.focus (); 
return false; 
Jelse{ 
if (bir!=biride){ 
alert ("身份 证 输入 和 生日 不 符合 !"); 
document .forms [0] .identy.focus (); 
return false; 


} 

return true; 
Jelse{ 

return false; 


} 
// 提 交 按钮 
function gogo(){ 
if (validateId () &&validatepwd () &&checkIdenty() &&checkecode () && 
checkEmail ()){ 
document .forms [0] .submit (); 
return true; 
} 
return false; 
} 
</script> 
< /head> 
<body> 


4 < form action= "login.html" method= "post"> 
<table> 

<tr> 
<td> 登 录 姓 名 < /td> 
<td><input class= "textSize" type= "text" name="id" /> 
</td> 

</tr> 

<tr> 
<td> 密 码 < /td> 
<td><input class= "textSize" type= "password" name= "pwd" /> 
</td> 

</tr> 

<tr> 
<td> 确 认 密 码 < /td> 
<td>< input class= "textSize" type= "password" name= "repwd" /> 
</td> 

</tr> 

E> 
<td> 姓 名 < /td> 
<td>< input class= "textSize" type= "text" name= "name" /> 
</td> 

</tr> 

Ey 
<td> 身 份 证 号 码 < /td> 
<td><input class= "textSize" type= "text" name="identy" /> 
</td> 

</tr> 

<tr> 
<td> 出 生年 月 日 < /td> 
<td>< input class= "textSize" type= "text" name= "birthday" readonly 

"showCalendar (this)" /> 


<tr> 
<td> 住 址 < /td> 
<td><input class= "textSize" type= "text" name= "address" /> 
</td> 
</tr> 
<tr> 
<td> 邮 编 < /td> 
<td>< input class= "textSize" type= "text" name= "ecode" /> 
</td> 
</tr> 
<tr> 
<td>E-mail< /td> 
<td><input class= "textSize" type= "text" name= "email" /> 
</td> 
</tr> 
<tr> 
<td align="right"> < input type="image" src="images/submit. gif™ 
onclick= "return gogo()" /> 


</td> Nr 
<td>< input type= "image" src="images/cancel.gif"> 
</td> 
</tr> 
</table> 
< /form> 
< /body> 
</html> 


3. 添加 朋友 信息 页 面 

朋友 信息 包括 朋友 ID、 朋 友 姓 名 、 生 日 、 电 话 号 码 、E-mail、 
地 址 以 及 关系 等 。 添 加 朋友 信息 页 面 的 布局 规划 如 图 12. 5 
所 示 。 

在 添加 朋友 信息 页 面 中 导入 common2. css 和 wpCalendar. 12. 5 添加 朋友 信息 页 
js 文件 ,添加 朋友 信息 页 面 的 代码 如 下 : 面 的 布局 规划 


< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" " 
http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset=UTF- 8"> 
<title>add.html< /title> 
< link href= "css/common2.css" type= "text/css" rel="stylesheet"> 
< script type= "text/javascript" src= "wpCalendar .js" charset= "GBK"> < /script> 
< /head> 
<body> 
< form action="" method= "post"> 
<table border=1> 
< caption> 
<font size=4 face= 华 文 新 魏 > 添 加 朋友 信息 < /font> 
< /caption> 
区 E> 
<td> 朋 友 ID< /td> 
<td>< input type= "text" readonly 
style= "border— width: lpt;border- style: dashed;border— 
color: red"name= "id" value= "201208080808888'>< /td> 
< /tr> 
<tr> 
<td> 朋 友 姓 名 < /td> 
<td>< input type= "text" name= "name" maxlength= "20" />< font 
color= "red"> * </font> 
</td> 
< /tr> 
2 
<td> 生 日 </td> 
<td>< input class= "textSize" type= "text" name= "birthday" 
readonly onfocus= "showCalendar (this)" /> 
</td> 
</tr> 
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<tr> 
<td> 电 话 号 码 < /td> 
<td><input type= "text" name= "telephone" maxlength= "20" /> 
</td> 
</tr> 
<tr> 
<td>E-mail< /td> 
<td> < input type= "text" name= "email" maxlength= "20" /> 
</td> 
< /tr> 
<tr> 
<td> 地 址 < /td> 
<td> < input type= "text" name= "address" maxlength= "50" /> 
</td> 
</tr> 
<tr> 
<td> 关 系 </td> 
<td>< select name= "relation"> 
<option value= "同事 "> 同事 < /option> 
<option value=" 同 学 "> 同学 < /option> 
<option value= "战友 "> 战友 < /option> 
<option value=" 老 乡 "> 老 乡 < /option> 
<option value= " 亲 威 "> 亲 威 < /option> 
<option value= "家 人 "> 家 人 < /option> 
<option value= "密友 "> 密友 < /option> 
<option value= "兄弟 "> 兄弟 < /option> 
<option value= "其 他 "> 其 他 < /option> 


</select></td> 
</tr> 
<tr> 
<td align= "center"> < input type= "button" value= "提交 " /> 
</td> 
<td align= "left">< input type= "reset" value=" 重 置 " /> 
</td> 
< /tr> 
</table> 
</form> 
< /pody> aslnene3 了 
EB Emo 
< /html> ES 本 [Beast | 
Emal |aattb8@12com | 
4 修改 朋友 信息 页 面 区 四 和 
修改 朋友 信息 页 面 的 布局 规划 如 图 12. 6 所 示 。 画 画 
5. 查询 朋友 信息 页 面 12.6 修改 朋友 信息 页 面 
查询 朋友 信息 页 面 的 布局 规划 如 图 12.7 所 示 。 的 布局 规划 


6. 删 除 朋 友信 息 页 面 
删除 朋友 信息 页 面 的 布局 规划 如 图 12. 8 所 示 。 


朋友 ID 轩 友 姓名 关系 查看 详情 
201208080808081 奥巴马 二 密友 查看 详情 
201208080808082 奥巴马 2 号 孙 威 查看 详情 
201208080808083 奥巴马 3 号 同事 查看 详情 
201208080808084 奥巴马 4 号 一 般 朋友 查看 详情 
201208080808085 具 巴 马 5 号 兄弟 查看 详情 
图 12.7 查询 朋友 信息 页 面 的 布局 规划 
朋友 ID 围 友 栖 名 关系 查看 详 些 删除 
201208080808081 奥巴马 1 号 密友 查看 详情 山 除 
201208080808082 奥巴马 2 号 系 威 查看 详情 才 除 
201208080808083 奥巴马 3 号 同事 查看 详情 删除 
201208080808084 奥巴马 4 号 一 般 朋友 查看 详情 出 除 
201208080808085 奥巴马 5 号 兄弟 查看 详情 其 除 
图 12.8 删除 朋友 信息 页 面 的 布局 规划 
7. 修 改 个 人 密码 页 面 


修改 个 人 密码 页 面 的 布局 规划 如 图 12.9 所 示 。 


图 12.9 修改 个 人 密码 页 面 的 布局 规划 


